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 slot 加入圖示元素。

加上 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 slot 加入徽章。

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 slot，可以完全自訂分頁的內容。

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 文字欄位