umbraco-menu-items

Umbraco メニュー項目

これは何ですか？

メニュー項目は、Umbraco バックオフィス全体のサイドバー、ボタンフライアウト、その他の場所に表示される拡張コンポーネントです。これらは Menu 拡張と連携して、ナビゲーションおよびアクションベースの機能を提供します。メニュー項目にはさまざまな種類（リンク、アクション、ツリー）があり、デフォルトコンポーネントまたはカスタム要素を使用できます。

ドキュメント

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

• メインドキュメント: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/menu-item
• Menu: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/menu
• Foundation: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
• Extension Registry: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry

リファレンス例

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

場所: /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/menu-item/

この例では、さまざまな種類のカスタムメニュー項目を示しています。本番環境のパターンについてはこれを研究してください。

関連する Foundation スキル

メニュー項目を実装する際にこれらの基礎的な概念を説明する必要がある場合は、以下のスキルを参照してください：

• Umbraco Element: カスタムメニュー項目要素を実装する場合、UmbLitElement を説明する場合、またはメニュー項目コンポーネントを作成する場合

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

• Controllers: UmbMenuItemAction、アクションロジック、execute メソッド、またはメニュー項目の動作を実装する場合

  • 参照スキル: umbraco-controllers

• Context API: メニュー項目アクションからのコンテキストアクセスまたはサービス消費を実装する場合

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

ワークフロー

1. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
2. 質問する - どの種類ですか？どのメニューですか？リンク、アクション、ツリーのどれですか？カスタム要素は必要ですか？
3. ファイルを生成 - 最新のドキュメントに基づいてマニフェスト + 要素（カスタムの場合）を作成します
4. 説明 - 作成された内容とテスト方法を示します

最小限の例

リンクメニュー項目 (manifest.ts)

export const manifests = [
  {
    type: "menuItem",
    kind: "link",
    alias: "My.MenuItem.Link",
    name: "My Link Menu Item",
    weight: 100,
    meta: {
      label: "External Link",
      icon: "icon-link",
      menus: ["Umb.Menu.Help"],
      href: "https://example.com"
    }
  }
];

アクションメニュー項目 (manifest.ts)

export const manifests = [
  {
    type: "menuItem",
    kind: "action",
    alias: "My.MenuItem.Action",
    name: "My Action Menu Item",
    api: () => import('./menu-item-action.js'),
    meta: {
      label: "Execute Action",
      icon: "icon-wand",
      menus: ["My.Menu"]
    }
  }
];

アクションの実装 (menu-item-action.ts)

import { UmbMenuItemAction } from '@umbraco-cms/backoffice/menu';

export class MyMenuItemAction extends UmbMenuItemAction {
  async execute() {
    console.log('Menu item clicked!');
    // Perform custom logic here
  }
}

export default MyMenuItemAction;

ツリーメニュー項目 (manifest.ts)

export const manifests = [
  {
    type: "menuItem",
    kind: "tree",
    alias: "My.MenuItem.Tree",
    name: "My Tree Menu Item",
    meta: {
      label: "Tree Structure",
      icon: "icon-folder",
      menus: ["Umb.Menu.Content"],
      treeAlias: "My.Tree"
    }
  }
];

カスタム要素メニュー項目 (menu-item.element.ts)

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

@customElement('my-menu-item')
export class MyMenuItemElement extends UmbLitElement {

  #onClick() {
    // Custom logic
  }

  render() {
    return html`
      <uui-menu-item
        label="Custom Item"
        @click="${this.#onClick}"
      >
        <uui-icon name="icon-wand"></uui-icon>
      </uui-menu-item>
    `;
  }
}

export default MyMenuItemElement;

メニュー項目の種類

1. Link - 外部 URL に移動します（href プロパティ）
2. Action - クリック時にカスタムロジックを実行します（api の実装が必要）
3. Tree - ツリー構造からサブメニューを表示します（treeAlias プロパティ）

主要なプロパティ

• type: 常に "menuItem"
• kind: メニュー項目の種類（"link"、"action"、"tree"）
• alias: 一意の識別子
• meta.label: 表示テキスト
• meta.icon: アイコン識別子
• meta.menus: 表示されるメニューエイリアスの配列
• weight: 順序を制御します（大きいほどリストの後方になります）
• element: カスタム要素へのパス（オプション）
• api: アクションの実装（kind: "action" の場合）

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