メインコンテンツまでスキップ

Menu メニュー

使用場面​

  • ナビゲーションメニューはWebサイトの魂であり、ユーザーはナビゲーションを使用して各ページ間を移動します。一般的にはトップナビゲーションとサイドナビゲーションに分かれ、トップナビゲーションは全体的なカテゴリと機能を提供し、サイドナビゲーションは多階層構造でWebサイトのアーキテクチャを整理します。

コンポーネント例​

コンポーネント属性​

属性说明类型默认值
dataSource

メニューのデータソース

MenuDataSource[]

[
{
  label: "メニュー項目1",
  key: "key1",
    children: [
      {
        label: "オプション1",
        key: "key1-1",
        tag: {
          text: "初期化",
          color: "blue",
        },
      },
      {
        label: "オプション2",
        key: "key1-2",
      },
    ],
  },
  {
    isDivider: true,
  },
  {
    label: "メニュー項目2",
    key: "key2",
    children: [
      {
        label: "オプション1",
        key: "key2-1",
      },
      {
        label: "オプション2",
        key: "key2-2",
      },
    ],
  },
  {
    label: "メニュー項目3",
    key: "key3",
    disabled: true,
  },
]
direction

メニューの第1階層の表示方向

'ver' | 'hoz'

-
footer

カスタムメニューフッター

string

-
header

カスタムメニューヘッダー

string

-
mode

サブメニューを開くモードを設定します

'inline' | 'popup'

inline

onItemClick

メニュー項目クリック時にトリガーされるイベント

(key: string,item: MenuDataSource, event: any) => void

-
onSelect

メニュー項目を選択または選択解除したときにトリガーされるイベント

(selectedKeys: string[] ,extraObj: any) => void

-
popupAlign

ポップアップ層の配置方法

'follow' | 'outside'

'follow'

selectMode

メニューコンポーネントの選択モード

'single' | 'multiple' | false

false

triggerType

サブメニューを開くトリガー動作を設定します

'click' | 'hover'

'click'

この文書は機械翻訳により生成されています。翻訳により生じた齟齬や相違点は拘束力を持たず、コンプライアンスや執行目的において法的効力はありません。
© DingTalk (Singapore) Private Limited