menu MDUI Documentation
color_lens
near_me
Start
keyboard_arrow_down
Instalation Compatibility JavaScript tool library JavaScript global methods
layers
Style
keyboard_arrow_down
Colors and themes Font Grid layout Typography Icon Media Helper class Shadow
widgets
Component
keyboard_arrow_down
Ripple animation effect Button Floating operation button Drop-down selection Divider Expandable panel Text box Select control Slider List List control Grid list Tab Tab toolbar App bar Navigation drawer Bottom navigation bar Card Scrap of paper Tooltip Snackbar Table Dialog box Menu Progress indicator
view_carousel
JavaScript Plug-in
keyboard_arrow_down
Collapse Headroom
local_mall
Resources
keyboard_arrow_down
Material icon

Tab tab

Call method

  1. Call through custom attributes (if the component is dynamically generated, you need to call mdui.mutation() To initialize)
  2. Call via JavaScript

Related Reading

Material Design Guidelines: Components-Tab Tab

style

Basic style

Below is a standard tab. It occupies 100% of the width on a mobile phone, and each option has the same width; on a tablet/PC, it will be aligned to the left.

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>

Scrollable

in <div class="mdui-tab"> Add class .mdui-tab-scrollable Allows the tabs to scroll horizontally, which is often used in scenarios where there are more options on the mobile terminal.

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>

Align center

in <div class="mdui-tab"></div> Add a class to the element .mdui-tab-centered The tabs can be centered on the tablet/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% width

in <div class="mdui-tab"></div> Add a class to the element .mdui-tab-full-widthYou can make the tabs always occupy 100% of the width, and the width of each tab is equal.

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>

With icon

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>

With icons and text

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>

With background color

in <div class="mdui-tab"></div> Add a class to the element .mdui-color-[color] You can assign a background color to the tab.

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>

Options activated by default

in <a> Add a class to the element .mdui-tab-active You can make this option active by default.

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>

Disabled options

in <a> Add on element disabled Properties can disable this option.

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>

Call method

Called by custom attributes

There is no need to write JavaScript code to use this method, only the element<div class="mdui-tab"></div> Add on mdui-tab="options" Properties can activate the component.

If the component is dynamically generated, you need to call mdui.mutation() Initialize.

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

Call via JavaScript

Instantiate components:

// CSS selector or DOM element whose selector is .mdui-tab element
// options are the parameters of the plug-in, see the parameter list below
var inst = new mdui.Tab(selector, options);
run

parameter

parameter name Types of Defaults description
trigger string click Switch the trigger mode of the tab.
  • click: Click to switch
  • hover: Mouse hover switch
loop boolean false Whether to enable cycle switching, if it is true, Calling the next method when the last option is activated will return to the first option, and calling the prev method when the first option is activated will return to the last option.

method

Method name description
prev() Switch to the previous option
next() Switch to the next option
show(index) The specified options are displayed.
  • index: The index number of the option or id
handleUpdate()

When the width of the parent element changes, you need to call this method to reset the position of the indicator.

When a new option is dynamically added to the tab, you also need to call this method to make the new option take effect.

event

Event name description the goal parameter
change.mdui.tab When the option is switched, the event will be triggered. <div class="mdui-tab">
  • event._detail.inst: Examples
  • event._detail.index: The index number of the active option
  • event._detail.id: The id of the tab content of the activated option
show.mdui.tab When switching to the specified option, the event will be triggered. <a> event._detail.inst: Examples

List of CSS class names

Class name effect
.mdui-tab Define a tab component.
.mdui-tab-scrollable Scrollable tab component.
.mdui-tab-centered Center-aligned tab component.
.mdui-tab-full-width 100% width tab component.
.mdui-tab-active Active state options.
arrow_back Previous
Grid list
arrow_forward Next
toolbar
Set document theme

Theme color

Main color

Accent color