Tabs
Tabsは、関連するコンテンツをグループ化し、タブを切り替えることで表示内容を変更できるコンポーネントです。
プロパティ
Tabsは、以下のプロパティをサポートしています。
名前 | 型 | デフォルト値 | 説明 |
---|---|---|---|
tabs |
TabsItem[] |
なし | タブ項目の配列を渡します。 |
currentTabId |
number | string |
なし | 現在選択されているタブのIDを指します。 |
TabsItem
TabsItemは、タブ内の情報を表すオブジェクトです。
名前 | 型 | デフォルト値 | 説明 |
---|---|---|---|
id |
number | string |
なし | タブ項目のidです。 |
label |
string |
なし | タブの項目名です。 |
disabled |
boolean |
false |
タブを無効化します。操作できません。 |
インストールの手順
以下のコンポーネントのコードを、使いたいプロジェクトにコピー&ペーストします。
パスは実際のプロジェクトの構成にあわせて更新してください。
使い方
サンプル
Default
特に操作が行われていない、デフォルトの状態です。
Current
currentTabIdを指定することで、任意のタブを選択状態にすることも可能です。
Disabled
利用不可の状態です。