menu MDUI 文档
color_lens
near_me
开始使用
keyboard_arrow_down
安装 兼容性 JavaScript 工具库 JavaScript 全局方法
layers
样式
keyboard_arrow_down
颜色与主题 字体 网格布局 排版 图标 媒体 辅助类 阴影
widgets
组件
keyboard_arrow_down
涟漪动画效果 按钮 浮动操作按钮 下拉选择 分隔线 可扩展面板 文本框 选择控件 滑块 列表 列表控制 网格列表 Tab 选项卡 工具栏 应用栏 抽屉式导航 底部导航栏 卡片 纸片 工具提示 Snackbar 表格 对话框 菜单 进度指示器
view_carousel
JavaScript 插件
keyboard_arrow_down
Collapse Headroom
local_mall
资源
keyboard_arrow_down
Material 图标

Tab 选项卡

调用方式

  1. 通过自定义属性调用（若组件是动态生成的，则需要调用 mdui.mutation() 进行初始化）
  2. 通过 JavaScript 调用

相关阅读

Material Design 设计指南：组件 - Tab 选项卡

样式

基础样式

下面是一个标准选项卡。在手机上时会占据 100% 的宽度，每一个选项宽度都相等；在平板/PC 上会左对齐。

codeplay_arrow
Example
web shopping images
web content
shopping content
images content
<div class="mdui-tab" mdui-tab>
  <a href="#example1-tab1" class="mdui-ripple">web</a>
  <a href="#example1-tab2" class="mdui-ripple">shopping</a>
  <a href="#example1-tab3" class="mdui-ripple">images</a>
</div>
<div id="example1-tab1" class="mdui-p-a-2">web content</div>
<div id="example1-tab2" class="mdui-p-a-2">shopping content</div>
<div id="example1-tab3" class="mdui-p-a-2">images content</div>

可滚动

在 <div class="mdui-tab"> 上添加类 .mdui-tab-scrollable 使选项卡可以横向滚动，常用于移动端选项较多的场景。

codeplay_arrow
Example
web shopping videos images news maps books flights apps dictionary 
<div class="mdui-tab mdui-tab-scrollable" mdui-tab>
  <a href="#example2-tab1" class="mdui-ripple">web</a>
  <a href="#example2-tab2" class="mdui-ripple">shopping</a>
  <a href="#example2-tab3" class="mdui-ripple">videos</a>
  <a href="#example2-tab4" class="mdui-ripple">images</a>
  <a href="#example2-tab5" class="mdui-ripple">news</a>
  <a href="#example2-tab6" class="mdui-ripple">maps</a>
  <a href="#example2-tab7" class="mdui-ripple">books</a>
  <a href="#example2-tab8" class="mdui-ripple">flights</a>
  <a href="#example2-tab9" class="mdui-ripple">apps</a>
  <a href="#example2-tab10" class="mdui-ripple">dictionary</a>
</div>

居中对齐

在 <div class="mdui-tab"></div> 元素上添加类 .mdui-tab-centered 可使选项卡在平板/PC 上居中对齐。

codeplay_arrow
Example
web shopping videos 
<div class="mdui-tab mdui-tab-centered" mdui-tab>
  <a href="#example3-tab1" class="mdui-ripple">web</a>
  <a href="#example3-tab2" class="mdui-ripple">shopping</a>
  <a href="#example3-tab3" class="mdui-ripple">videos</a>
</div>

100% 宽度

在 <div class="mdui-tab"></div> 元素上添加类 .mdui-tab-full-width 可以使选项卡始终占据 100% 的宽度，且每个选项卡宽度相等。

codeplay_arrow
Example
web shopping videos 
<div class="mdui-tab mdui-tab-full-width" mdui-tab>
  <a href="#example4-tab1" class="mdui-ripple">web</a>
  <a href="#example4-tab2" class="mdui-ripple">shopping</a>
  <a href="#example4-tab3" class="mdui-ripple">videos</a>
</div>

含图标

codeplay_arrow
Example
phone favorite perm_contact_calendar 
<div class="mdui-tab" mdui-tab>
  <a href="#example5-tab1" class="mdui-ripple">
    <i class="mdui-icon material-icons">phone</i>
  </a>
  <a href="#example5-tab2" class="mdui-ripple">
    <i class="mdui-icon material-icons">favorite</i>
  </a>
  <a href="#example5-tab3" class="mdui-ripple">
    <i class="mdui-icon material-icons">perm_contact_calendar</i>
  </a>
</div>

含图标和文本

codeplay_arrow
Example
phone favorite perm_contact_calendar 
<div class="mdui-tab" mdui-tab>
  <a href="#example6-tab1" class="mdui-ripple">
    <i class="mdui-icon material-icons">phone</i>
    <label>recents</label>
  </a>
  <a href="#example6-tab2" class="mdui-ripple">
    <i class="mdui-icon material-icons">favorite</i>
    <label>favorites</label>
  </a>
  <a href="#example6-tab3" class="mdui-ripple">
    <i class="mdui-icon material-icons">perm_contact_calendar</i>
    <label>nearby</label>
  </a>
</div>

含背景色

在 <div class="mdui-tab"></div> 的元素上添加类 .mdui-color-[color] 即可为选项卡赋予背景色。

codeplay_arrow
Example
phone favorite perm_contact_calendar 
<div class="mdui-tab mdui-color-theme" mdui-tab>
  <a href="#example7-tab1" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">phone</i>
    <label>recents</label>
  </a>
  <a href="#example7-tab2" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">favorite</i>
    <label>favorites</label>
  </a>
  <a href="#example7-tab3" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">perm_contact_calendar</i>
    <label>nearby</label>
  </a>
</div>

默认激活的选项

在 <a> 元素上添加类 .mdui-tab-active 可以使该选项处于默认激活状态。

codeplay_arrow
Example
web shopping images 
<div class="mdui-tab" mdui-tab>
  <a href="#example8-tab1" class="mdui-ripple">web</a>
  <a href="#example8-tab2" class="mdui-tab-active mdui-ripple">shopping</a>
  <a href="#example8-tab3" class="mdui-ripple">images</a>
</div>

禁用状态的选项

在 <a> 元素上添加 disabled 属性可以禁用该选项。

codeplay_arrow
Example
web shopping images 
<div class="mdui-tab" mdui-tab>
  <a href="#example9-tab1" class="mdui-ripple">web</a>
  <a href="#example9-tab2" class="mdui-ripple" disabled>shopping</a>
  <a href="#example9-tab3" class="mdui-ripple">images</a>
</div>

调用方式

通过自定义属性调用

使用该方式无需编写 JavaScript 代码，只需在元素 <div class="mdui-tab"></div> 上添加 mdui-tab="options" 属性即可激活该组件。

若组件是动态生成的，则需要调用 mdui.mutation() 进行初始化。

<div class="mdui-tab" mdui-tab>
...
</div>

通过 JavaScript 调用

实例化组件：

// selector 为 .mdui-tab 元素的 CSS 选择器或 DOM 元素
// options 为插件的参数，见下面的参数列表
var inst = new mdui.Tab(selector, options);
运行

参数

参数名 类型 默认值 描述
trigger string click 切换选项卡的触发方式。
  • click: 点击切换
  • hover: 鼠标悬浮切换
loop boolean false 是否启用循环切换，若为 true，则最后一个选项激活时调用 next 方法将回到第一个选项，第一个选项激活时调用 prev 方法将回到最后一个选项。

方法

方法名 描述
prev() 切换到上一个选项
next() 切换到下一个选项
show(index) 显示指定的选项。
  • index：选项的索引号或 id
handleUpdate()

当父元素的宽度发生变化时，需要调用该方法重新设置指示器位置。

当在选项卡中动态添加了新的选项时，也需要调用该方法使新的选项生效。

事件

事件名 描述 目标 参数
change.mdui.tab 切换选项时，事件将被触发。 <div class="mdui-tab">
  • event._detail.inst：实例
  • event._detail.index：激活的选项的索引号
  • event._detail.id：激活的选项的选项卡内容的id
show.mdui.tab 切换到指定选项时，事件将被触发。 <a> event._detail.inst：实例

CSS 类名列表

类名 效果
.mdui-tab 定义一个选项卡组件。
.mdui-tab-scrollable 可滚动选项卡组件。
.mdui-tab-centered 居中对齐的选项卡组件。
.mdui-tab-full-width 100% 宽度的选项卡组件。
.mdui-tab-active 激活状态的选项。
arrow_back Previous
网格列表
arrow_forward Next
工具栏
设置文档主题

主题色

主色

强调色