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 属性,可以设置选项卡的样式。

选项卡位置

<mdui-tabs> 组件上使用 placement 属性,可以设置选项卡的位置。

全宽显示

<mdui-tabs> 组件上添加 full-width 属性,可以使选项卡占据全部宽度,各个选项卡将平均分配宽度。

图标

<mdui-tab> 组件上设置 icon 属性,可以在选项卡上添加 Material Icons 图标。也可以通过 icon slot 添加图标元素。

添加 inline 属性可以将图标和文本水平排列。

徽标

<mdui-tab> 组件中,可以通过 badge slot 添加徽标。

自定义内容

<mdui-tab> 组件中使用 custom slot,可以完全自定义选项卡的内容。

mdui-tabs API

属性

HTML 属性JavaScript 属性Reflect类型默认值
variantvariant'primary' | 'secondary''primary'

选项卡形状。可选值包括:

  • primary:适用于位于 <mdui-top-app-bar> 下方,用于切换应用的主页面的场景
  • secondary:适用于位于页面中,用于切换一组相关内容的场景
valuevaluestring-

当前激活的 <mdui-tab> 的值

placementplacement'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-widthfullWidthbooleanfalse

是否填满父元素宽度

事件

名称
change

选中的值变化时触发

Slots

名称
默认

<mdui-tab> 元素

panel

<mdui-tab-panel> 元素

CSS Parts

名称
container

<mdui-tab> 元素的容器

indicator

激活状态指示器

mdui-tab API

属性

HTML 属性JavaScript 属性Reflect类型默认值
valuevaluestring-

选项卡导航项的值

iconiconstring-

Material Icons 图标名。也可以通过 slot="icon" 设置

inlineinlinebooleanfalse

是否把图标和文本水平排列

autofocusautofocusbooleanfalse

是否在页面加载完成后自动获取焦点

tabindextabIndexnumber-

元素在使用 Tab 键切换焦点时的顺序

方法

名称参数返回值
click
void

模拟鼠标点击元素

focus
  • options: FocusOptions (可选)
void

将焦点设置到当前元素。

可以传入一个对象作为参数,该对象的属性包括:

  • preventScroll:默认情况下,元素获取焦点后,页面会滚动以将该元素滚动到视图中。如果不希望页面滚动,可以将此属性设置为 true
blur
void

移除当前元素的焦点

事件

名称
focus

获得焦点时触发

blur

失去焦点时触发

Slots

名称
默认

选项卡导航项的文本内容

icon

选项卡导航项中的图标

badge

徽标

custom

自定义整个选项卡导航项中的内容

CSS Parts

名称
container

选项卡导航项容器

icon

选项卡导航项中的图标

label

选项卡导航项的文本

mdui-tab-panel API

属性

HTML 属性JavaScript 属性Reflect类型默认值
valuevaluestring-

选项卡面板项的值

Slots

名称
默认

选项卡面板项内容

MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
概述 安装 快速入门 TypeScript 支持 IDE 支持 本地化 常见问题
样式
暗色模式 动态配色 文章排版 设计令牌
与框架集成
React Vue Angular
组件
Button 按钮ButtonIcon 图标按钮Fab 浮动操作按钮SegmentedButton 分段按钮Chip 纸片Card 卡片Checkbox 复选框Radio 单选框Switch 开关切换Slider 滑块RangeSlider 范围滑块List 列表Collapse 折叠面板Tabs 选项卡Dropdown 下拉组件Menu 菜单Select 选择框TextField 文本框LinearProgress 线性进度指示器CircularProgress 圆形进度指示器Dialog 对话框Divider 分割线Avatar 头像Badge 徽标Icon 图标Tooltip 工具提示Snackbar 消息条NavigationBar 底部导航栏NavigationDrawer 侧边抽屉栏NavigationRail 侧边导航栏BottomAppBar 底部应用栏TopAppBar 顶部应用栏Layout 布局
工具函数
jq 工具库 dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
独立包
@mdui/icons 图标组件库