Tabs
Tabs are used to group different content or datasets.
Import the component:
import 'mdui/components/tabs.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
Import the TypeScript type:
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';
Example:
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>
The variant attribute on the <mdui-tabs> component allows you to set the style of the tabs.
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>
Code
The placement attribute on the <mdui-tabs> component allows you to set the position of the tabs.
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="Select placement value" 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>
Code
To make the tabs occupy the entire width and be evenly distributed, add the full-width attribute to the <mdui-tabs> component.
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>
Code
Add Material Icons to the tabs by setting the icon attribute on the <mdui-tab> component. Alternatively, use the icon slot to add icon elements.
Arrange the icon and text horizontally by adding the inline attribute.
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>
Code
Add a badge to the <mdui-tab> component using the 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>
Code
Use the custom slot in the <mdui-tab> component to fully customize the content of the tabs.
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>
Code| Attribute | Property | Reflect | Type | Default |
|---|
value | value | | string | - |
Specifies the value of the tab panel.
|
| Attribute | Property | Reflect | Type | Default |
|---|
value | value | | string | - |
Specifies the tab value.
|
icon | icon | | string | - |
Specifies the Material Icons name. Alternatively, use slot="icon".
|
inline | inline | | boolean | false |
Arranges the icon and text horizontally.
|
autofocus | autofocus | | boolean | false |
Determines if the element should be focused when the page loads.
|
tabindex | tabIndex | | number | - |
Specifies the order in which the element receives focus when navigating with the Tab key.
|
| Name | Parameters | Returns |
|---|
click | | void |
Simulates a mouse click on the element.
|
focus | options: FocusOptions (Optional)
| void |
Sets focus on the element. An optional parameter can be an object with a preventScroll property. If preventScroll is set to true, the page will not scroll to bring the focused element into view.
|
blur | | void |
Removes focus from the element.
|
| Name |
|---|
focus |
Emitted when the tab gains focus.
|
blur |
Emitted when the tab loses focus.
|
| Attribute | Property | Reflect | Type | Default |
|---|
variant | variant | | 'primary' | 'secondary' | 'primary' |
Defines the tab shape. Possible values:
primary: Located below <mdui-top-app-bar>, used for switching between main application pages.secondary: Located within the page, used for switching between related content groups.
|
value | value | | string | - |
Specifies the active <mdui-tab> value.
|
placement | placement | | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' | 'top-start' |
Defines the tab position. Default is top-start. Possible values:
top-start: Top, left-aligned.top: Top, center-aligned.top-end: Top, right-aligned.bottom-start: Bottom, left-aligned.bottom: Bottom, center-aligned.bottom-end: Bottom, right-aligned.left-start: Left, top-aligned.left: Left, center-aligned.left-end: Left, bottom-aligned.right-start: Right, top-aligned.right: Right, center-aligned.right-end: Right, bottom-aligned.
|
full-width | fullWidth | | boolean | false |
If set, the tabs will fill the width of its parent element.
|
| Name |
|---|
change |
Emitted when the selected value changes.
|