Tabs

Tabsは、関連するコンテンツをグループ化し、タブを切り替えることで表示内容を変更できるコンポーネントです。

プロパティ

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

名前 デフォルト値 説明
tabs TabsItem[] なし タブ項目の配列を渡します。
currentTabId number | string なし 現在選択されているタブのIDを指します。

TabsItem

TabsItemは、タブ内の情報を表すオブジェクトです。

名前 デフォルト値 説明
id number | string なし タブ項目のidです。
label string なし タブの項目名です。
disabled boolean false タブを無効化します。操作できません。

インストールの手順

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

使い方


サンプル

Default

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

Current

currentTabIdを指定することで、任意のタブを選択状態にすることも可能です。

Disabled

利用不可の状態です。