Tabsタブ

タブコンポーネントは、コンテンツやデータセットをグループ化して表示するために使用され、ユーザーが異なるカテゴリ間で素早く切り替えられるようにします。

使用方法

コンポーネントを必要に応じてインポートします：

import 'mdui/components/tabs.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';

コンポーネントの TypeScript 型を必要に応じてインポートします：

import type { Tabs } from 'mdui/components/tabs.js';
import type { Tab } from 'mdui/components/tab.js';
import type { TabPanel } from 'mdui/components/tab-panel.js';

使用例：

Tab 1

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="tab-1">
  <mdui-tab value="tab-1">Tab 1</mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

例

タブスタイル

<mdui-tabs> コンポーネントで variant 属性を使用することで、タブのスタイルを設定できます。

Tab 1

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

Tab 1

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="tab-1" variant="primary">
  <mdui-tab value="tab-1">Tab 1</mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

<mdui-tabs value="tab-1" variant="secondary">
  <mdui-tab value="tab-1">Tab 1</mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

ソース

タブの位置

<mdui-tabs> コンポーネントで placement 属性を使用することで、タブの位置を設定できます。

top-start

top

top-end

bottom-start

bottom

bottom-end

left-start

left

left-end

right-start

right

right-end

Tab 1

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-select class="example-change-placement" placeholder="placement 値を選択" style="width: 180px">
  <mdui-menu-item value="top-start">top-start</mdui-menu-item>
  <mdui-menu-item value="top">top</mdui-menu-item>
  <mdui-menu-item value="top-end">top-end</mdui-menu-item>
  <mdui-menu-item value="bottom-start">bottom-start</mdui-menu-item>
  <mdui-menu-item value="bottom">bottom</mdui-menu-item>
  <mdui-menu-item value="bottom-end">bottom-end</mdui-menu-item>
  <mdui-menu-item value="left-start">left-start</mdui-menu-item>
  <mdui-menu-item value="left">left</mdui-menu-item>
  <mdui-menu-item value="left-end">left-end</mdui-menu-item>
  <mdui-menu-item value="right-start">right-start</mdui-menu-item>
  <mdui-menu-item value="right">right</mdui-menu-item>
  <mdui-menu-item value="right-end">right-end</mdui-menu-item>
</mdui-select>

<mdui-tabs value="tab-1" placement="top-start" class="example-placement">
  <mdui-tab value="tab-1">Tab 1</mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1" style="height: 260px">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2" style="height: 260px">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3" style="height: 260px">Panel 3</mdui-tab-panel>
</mdui-tabs>

<script>
  const select = document.querySelector(".example-change-placement");
  const tabs = document.querySelector(".example-placement");

  select.addEventListener("change", (event) => {
    tabs.placement = event.target.value;
  });
</script>

ソース

全幅表示

<mdui-tabs> コンポーネントに full-width 属性を追加すると、タブが全幅を占めるようになり、各タブは幅を均等に配分します。

Tab 1

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="tab-1" full-width>
  <mdui-tab value="tab-1">Tab 1</mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

ソース

アイコン

<mdui-tab> コンポーネントに icon 属性を設定すると、タブに Material Icons アイコンを追加できます。icon スロットを使用してアイコン要素を追加することもできます。

inline 属性を追加すると、アイコンとテキストを水平に配置できます。

Tab 1

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="tab-1">
  <mdui-tab value="tab-1" icon="library_music">Tab 1</mdui-tab>
  <mdui-tab value="tab-2">
    Tab 2
    <mdui-icon slot="icon" name="movie"></mdui-icon>
  </mdui-tab>
  <mdui-tab value="tab-3" icon="menu_book" inline>Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

ソース

バッジ

<mdui-tab> コンポーネントでは、badge スロットを使用してバッジを追加できます。

Tab 1 99+

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="tab-1">
  <mdui-tab value="tab-1">
    Tab 1
    <mdui-badge slot="badge">99+</mdui-badge>
  </mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

ソース

カスタムコンテンツ

<mdui-tab> コンポーネントで custom スロットを使用すると、タブのコンテンツを完全にカスタマイズできます。

Tab 1 Icon

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="tab-1">
  <mdui-tab value="tab-1">
    Tab 1
    <mdui-chip slot="custom" icon="search">Icon</mdui-chip>
  </mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

ソース

`mdui-tab-panel` API

プロパティ

HTML 属性	JavaScript プロパティ	Reflect	型	デフォルト値
`value`	`value`		`string`	-
タブパネルアイテムの値です。

Slots

名前
デフォルト
タブパネルアイテムの内容

`mdui-tab` API

プロパティ

HTML 属性	JavaScript プロパティ	型	デフォルト値
`value`	`value`	`string`	-
タブナビゲーションアイテムの値です。
`icon`	`icon`	`string`	-
Material Iconsのアイコン名です。`slot="icon"` で設定することもできます。
`inline`	`inline`	`boolean`	`false`
アイコンとテキストを水平に並べるかどうかを指定します。
`autofocus`	`autofocus`	`boolean`	`false`
ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
`tabindex`	`tabIndex`	`number`	-
Tab キーによるフォーカス移動時の、要素の順序を指定します。

メソッド

名前	パラメーター	戻り値
`click`		`void`
要素のマウスクリックをシミュレートします。
`focus`	`options: FocusOptions` (オプション)	`void`
現在の要素にフォーカスを設定します。オプションとして、以下のプロパティを持つオブジェクトを渡すことができます： `preventScroll`：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを `true` に設定します。
`blur`		`void`
現在の要素からフォーカスを外します。

イベント

名前
`focus`
フォーカスを取得したときに発生します。
`blur`
フォーカスを失ったときに発生します。

Slots

名前
デフォルト
タブナビゲーションアイテムのテキストコンテンツ
`icon`
タブナビゲーションアイテム内のアイコン
`badge`
バッジ
`custom`
タブナビゲーションアイテム全体の内容をカスタマイズします。

CSS Parts

名前
`container`
タブナビゲーションアイテムコンテナ
`icon`
タブナビゲーションアイテム内のアイコン
`label`
タブナビゲーションアイテムのテキスト

`mdui-tabs` API

プロパティ

HTML 属性	JavaScript プロパティ	型	デフォルト値
`variant`	`variant`	`'primary' \| 'secondary'`	`'primary'`
タブの形状です。次の値を指定します： `primary`：`<mdui-top-app-bar>` の下に配置され、アプリのメインページを切り替える場合に適しています。 `secondary`：ページ内に配置され、関連するコンテンツのセットを切り替える場合に適しています。
`value`	`value`	`string`	-
現在アクティブな `<mdui-tab>` の値です。
`placement`	`placement`	`'top-start' \| 'top' \| 'top-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'top-start'`
タブの配置位置です。既定値は `top-start` です。次の値を指定します： `top-start`：上部、左揃え `top`：上部、中央揃え `top-end`：上部、右揃え `bottom-start`：下部、左揃え `bottom`：下部、中央揃え `bottom-end`：下部、右揃え `left-start`：左側、上揃え `left`：左側、中央揃え `left-end`：左側、下揃え `right-start`：右側、上揃え `right`：右側、中央揃え `right-end`：右側、下揃え
`full-width`	`fullWidth`	`boolean`	`false`
親要素の幅いっぱいに広げるかどうかを指定します。

イベント

名前
`change`
選択された値が変化したときに発生します。

Slots

名前
デフォルト
`<mdui-tab>` 要素
`panel`
`<mdui-tab-panel>` 要素

CSS Parts

名前
`container`
`<mdui-tab>` 要素のコンテナ
`indicator`
アクティブ状態インジケーター

前の章

Switch スイッチ

次の章

TextField テキストフィールド