umbraco-umbraco-element

Umbraco Element

これは何ですか？

Umbraco Element は、UmbElementMixin を通じて Umbraco バックオフィスとの統合を簡素化する Web Component 拡張です。コンテキストの消費/提供、状態の監視、ローカライズの処理、コントローラーのホストを行うメソッドを提供します。UmbElementMixin は Web Component 互換の任意の基底クラスに適用できますが、UmbLitElement はこのミックスインと Lit を組み合わせた便利なラッパーです。

ドキュメント

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

• メインドキュメント: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation/umbraco-element
• Context API: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation/context-api
• コントローラー: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation/umbraco-controller
• ローカライズ: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation/localization
• Foundation: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation

ワークフロー

1. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
2. 質問する - Lit を使用しますか？コンテキストが必要ですか？ローカライズが必要ですか？どの基底クラスですか？
3. ファイルを生成 - 最新のドキュメントに基づいて UmbElementMixin または UmbLitElement を使用して要素を作成します
4. 説明 - 作成されたものとその使用方法を示します

最小限の例

UmbLitElement の使用（Lit に推奨）

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

@customElement('my-element')
export class MyElement extends UmbLitElement {

  constructor() {
    super();
    // Access built-in features
    this.consumeContext(MY_CONTEXT, (context) => {
      console.log('Context consumed:', context);
    });
  }

  render() {
    return html`
      <div>
        <h3>${this.localize.term('myKey')}</h3>
        <p>My custom element</p>
      </div>
    `;
  }
}

export default MyElement;

HTMLElement で UmbElementMixin を使用

import { customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';

@customElement('my-element')
export class MyElement extends UmbElementMixin(HTMLElement) {

  constructor() {
    super();
    this.consumeContext(MY_CONTEXT, (context) => {
      // Use context
    });
  }

  connectedCallback() {
    this.innerHTML = `
      <div>
        <h3>My Element</h3>
      </div>
    `;
  }
}

export default MyElement;

UI ライブラリコンポーネントで UmbElementMixin を使用

import { customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { UUIButtonElement } from '@umbraco-cms/backoffice/external/uui';

@customElement('my-custom-button')
export class MyCustomButton extends UmbElementMixin(UUIButtonElement) {

  constructor() {
    super();
    // Now has access to Umbraco contexts and controllers
  }
}

export default MyCustomButton;

コンテキストの消費

import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';

export class MyElement extends UmbLitElement {

  #notificationContext?: typeof UMB_NOTIFICATION_CONTEXT.TYPE;

  constructor() {
    super();

    this.consumeContext(UMB_NOTIFICATION_CONTEXT, (context) => {
      this.#notificationContext = context;
    });
  }

  showNotification() {
    this.#notificationContext?.peek('positive', {
      data: { headline: 'Success!', message: 'Operation completed' }
    });
  }
}

監視可能な状態の使用

import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user';

export class MyElement extends UmbLitElement {

  @state()
  private _userName?: string;

  constructor() {
    super();

    this.consumeContext(UMB_CURRENT_USER_CONTEXT, (context) => {
      this.observe(
        context.currentUser,
        (user) => {
          this._userName = user?.name;
        },
        '_userName'
      );
    });
  }
}

主な機能

• consumeContext() - 親要素からコンテキストを購読して消費します
• provideContext() - 子要素にコンテキストを提供します
• observe() - 監視可能な状態を監視し、リアクティブな更新をトリガーします
• localize - 翻訳用の組み込みローカライズコントローラー
• hostController() - 要素内でコントローラーをホストおよび管理します

UmbLitElement と UmbElementMixin

機能	UmbLitElement	UmbElementMixin
基底	Lit で事前設定済み	任意の基底クラスに適用
使用方法	extends UmbLitElement	extends UmbElementMixin(BaseClass)
最適な用途	Lit ベースのコンポーネント	カスタム基底クラスまたは UI ライブラリコンポーネント
機能	同じ機能	同じ機能

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