Tabs
Usage
- Call via custom attributes (if the component is dynamically generated, you need to call
mdui.mutation()for initialization) - Call via JavaScript
Related Reading
Style
Basic styles
Below is a standard tab. It occupies 100% width on mobile, with each tab having equal width; it is left-aligned on tablets/PCs.
<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
Add the class .mdui-tab-scrollable to <div class="mdui-tab"> to make the tabs horizontally scrollable, commonly used in mobile scenarios with many options.
<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>
Center aligned
Add the class .mdui-tab-centered to the <div class="mdui-tab"></div> element to center-align the tabs on tablets/PCs.
<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
Add the class .mdui-tab-full-width to the <div class="mdui-tab"></div> element to make the tabs always occupy 100% width, with each tab having equal width.
<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>
<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>
<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
Add the class .mdui-color-[color] to the <div class="mdui-tab"></div> element to give the tabs a background color.
<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>
Default active option
Add the class .mdui-tab-active to the <a> element to make the option active by default.
<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>
<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>
Usage
Call via Attributes
Using this method does not require writing JavaScript code; simply add the mdui-tab="options" attribute to the <div class="mdui-tab"></div> element to activate the component.
If the component is dynamically generated, you need to call mdui.mutation() for initialization.
<div class="mdui-tab" mdui-tab>
...
</div>Call via JavaScript
Instantiate the component:
// selector is the CSS selector or DOM element of the .mdui-tab element
// options is the parameters of the plugin; see the parameter list below
var inst = new mdui.Tab(selector, options);Param
| Param Name | Type | Default | Description |
|---|---|---|---|
trigger | string | click | Trigger method for switching tabs.
|
loop | boolean | false | Whether to enable cyclic switching. If true, calling the next method while the last option is active will return to the first option, and calling the prev method while the first option is active will return to the last option. |
Method
| Method Name | Description |
|---|---|
prev() | Switch to the previous option |
next() | Switch to the next option |
show(index) | Show the specified option.
|
handleUpdate() | When the width of the parent element changes, you need to call this method to reset the indicator position. When new options are dynamically added to the tabs, you also need to call this method to make the new options take effect. |
Event
| Event Name | Description | Target | Params |
|---|---|---|---|
change.mdui.tab | Triggered when switching options. | <div class="mdui-tab"></div> |
|
show.mdui.tab | Triggered when switching to a specified option. | <a></a> | event._detail.inst: Instance |