Menu

Menuは、複数の選択肢や操作を一覧で表示し、ユーザーが項目を選択できるコンポーネントです。
主にアプリケーションのナビゲーションや、操作メニューとして利用されます。
項目数や押下時の処理を柔軟に設定できます。

プロパティ

Menuは、以下のプロパティをサポートしています。

名前 型 デフォルト値 説明
item MenuItem メニューの設定（項目やラベルなど）を渡します。
current string 現在選択されているメニューの値を指定します。

MenuItem

プロパティ名 型 説明
id string メニュー項目の一意なID
label string メニューのラベル
options MenuOptionProps[] サブメニューの設定（項目やラベルなど）を渡します
disabled boolean 押下できるかどうか
onClick (item: MenuItem) => void 押下時に発火するコールバック関数

MenuOptionProps

プロパティ名 型 説明
id string メニュー項目の一意なID
label string メニューのラベル
disabled boolean 押下できるかどうか
onClick (item: MenuOptionProps) => void 押下時に発火するコールバック関数

インストールの手順

以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。
パスは実際のプロジェクトの構成にあわせて更新します。

使い方

サンプル

Default

特に操作が行われていない、デフォルトの状態です。

Disabled

メニュー項目が無効化されている状態です。

onClick

メニュー項目がクリックされたときに、コールバック関数で値を受け取ることができます。