Tabs

Tabs are used to group different content or datasets.

Usage

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>

Examples

Variant

The variant attribute on the <mdui-tabs> component allows you to set the style of the tabs.

Tab Placement

The placement attribute on the <mdui-tabs> component allows you to set the position of the tabs.

Full Width

To make the tabs occupy the entire width and be evenly distributed, add the full-width attribute to the <mdui-tabs> component.

Icons

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.

Badge

Add a badge to the <mdui-tab> component using the badge slot.

Custom Content

Use the custom slot in the <mdui-tab> component to fully customize the content of the tabs.

mdui-tabs API

Properties

AttributePropertyReflectTypeDefault
variantvariant'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.
valuevaluestring-

Specifies the active <mdui-tab> value.

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

If set, the tabs will fill the width of its parent element.

Events

Name
change

Emitted when the selected value changes.

Slots

Name
(default)

<mdui-tab> elements.

panel

<mdui-tab-panel> elements.

CSS Parts

Name
container

Container for <mdui-tab> elements.

indicator

Indicator for the active state.

mdui-tab API

Properties

AttributePropertyReflectTypeDefault
valuevaluestring-

Specifies the tab value.

iconiconstring-

Specifies the Material Icons name. Alternatively, use slot="icon".

inlineinlinebooleanfalse

Arranges the icon and text horizontally.

autofocusautofocusbooleanfalse

Determines if the element should be focused when the page loads.

tabindextabIndexnumber-

Specifies the order in which the element receives focus when navigating with the Tab key.

Methods

NameParametersReturns
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.

Events

Name
focus

Emitted when the tab gains focus.

blur

Emitted when the tab loses focus.

Slots

Name
(default)

Tab text.

icon

Tab icon.

badge

Badge.

custom

Custom tab content.

CSS Parts

Name
container

Tab container.

icon

Tab icon.

label

Tab text.

mdui-tab-panel API

Properties

AttributePropertyReflectTypeDefault
valuevaluestring-

Specifies the value of the tab panel.

Slots

Name
(default)

The content of the tab panel.

MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
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
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons