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`
激活状态指示器

Collapse 折叠面板

Dropdown 下拉组件