umbraco-modals

Umbraco モーダル

これは何ですか？

モーダルとは、周囲を暗くし、フォーカスロックを備えたポップアップレイヤーです。モーダル拡張タイプは、Umbraco バックオフィス内でダイアログやサイドバーを構成して表示するために使用されます。モーダルは、ルート経由（ディープリンク用）で開くことも、実行時に Modal Manager Context を使用して開くこともでき、型安全な通信のためにトークンベースのシステムを使用します。

ドキュメント

実装する前に、常に最新のドキュメントを取得してください:

• メインドキュメント: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/modals
• カスタムモーダル: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/modals/custom-modals
• ルート登録: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/modals/route-registration
• 基盤: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
• 拡張機能レジストリ: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry

参考例

Umbraco のソースには動作する例が含まれています:

カスタムモーダルの場所: /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/custom-modal/

この例では、トークン、要素、マニフェストを備えた基本的なカスタムモーダルを示します。

ルート付きモーダルの場所: /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/modal-routed/

この例では、ディープリンクをサポートするために URL ルーティング経由で開くことができるモーダルを示します。

関連する基盤スキル

モーダルを実装する際にこれらの基盤的な概念を説明する必要がある場合は、以下のスキルを参照してください:

• Context API: モーダルマネージャーコンテキストの実装、consumeContext パターン、またはモーダルを開く方法を説明する場合

  • 参照スキル: umbraco-context-api

• Umbraco Element: モーダル要素の実装、UmbLitElement の説明、またはモーダルコンポーネントの作成を行う場合

  • 参照スキル: umbraco-umbraco-element

• 状態管理: モーダルのデータフロー、モーダルの値、またはモーダルと呼び出し元の間の状態管理を実装する場合

  • 参照スキル: umbraco-state-management

ワークフロー

1. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
2. 質問する - モーダルは何を行いますか？ ダイアログですか、サイドバーですか？ 入力/出力するデータは何ですか？ ディープリンクは必要ですか？
3. ファイルを生成 - 最新のドキュメントに基づいて、モーダルトークン + 要素 + マニフェストを作成します
4. 説明する - 作成されたものと、モーダルを開く方法を示します

最小限の例

モーダルトークン (modal-token.ts)

import { UmbModalToken } from '@umbraco-cms/backoffice/modal';

export interface MyModalData {
  title: string;
}

export interface MyModalValue {
  confirmed: boolean;
}

export const MY_MODAL_TOKEN = new UmbModalToken<MyModalData, MyModalValue>(
  'My.Modal',
  {
    modal: {
      type: 'sidebar',
      size: 'small',
    },
  }
);

モーダル要素 (modal.element.ts)

import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbModalExtensionElement } from '@umbraco-cms/backoffice/modal';

@customElement('my-modal')
export class MyModalElement extends UmbLitElement
  implements UmbModalExtensionElement<MyModalData, MyModalValue> {

  modalContext: any;

  #handleSubmit() {
    this.modalContext.updateValue({ confirmed: true });
    this.modalContext.submit();
  }

  render() {
    return html`
      <umb-body-layout headline="${this.modalContext?.data?.title}">
        <uui-box>
          <p>Modal content here</p>
          <uui-button @click="${this.#handleSubmit}">
            Confirm
          </uui-button>
        </uui-box>
      </umb-body-layout>
    `;
  }
}

export default MyModalElement;

マニフェスト (manifest.ts)

export const manifests = [
  {
    type: 'modal',
    alias: 'My.Modal',
    name: 'My Modal',
    element: () => import('./modal.element.js'),
  },
];

モーダルを開く

import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
import { MY_MODAL_TOKEN } from './modal-token.js';

// In your element:
constructor() {
  super();
  this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (context) => {
    this._modalManager = context;
  });
}

async openModal() {
  const result = await this._modalManager?.open(this, MY_MODAL_TOKEN, {
    data: { title: 'My Modal' }
  });

  if (result?.confirmed) {
    console.log('User confirmed!');
  }
}

モーダルの種類

• ダイアログ: 画面中央に表示されます
• サイドバー: 右側からスライドインします

以上です！ 常に最新のドキュメントを取得し、例は最小限に保ち、完全に動作するコードを生成してください。