@material/mwc-tab
v0.21.0-canary.4dc32be3.0 material design web components tab
<mwc-tab>
IMPORTANT: The Material Web Components are a work in progress and subject to major changes until 1.0 release.
Tabs organize content across different screens, data sets, and other interactions.
Material Design Guidelines: tabs
Installation
npm install @material/mwc-tab
NOTE: The Material Web Components are distributed as ES2017 JavaScript Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional tooling step is required to resolve bare module specifiers, as well as transpilation and polyfills for IE11. See here for detailed instructions.
Example usage
For usage please see mwc-tab-bar
API
Slots
Name | Description |
---|---|
icon |
Slotted icon to display. Only available if hasImageIcon or icon are defined. |
Properties/Attributes
Name | Type | Default | Description |
---|---|---|---|
label |
string |
'' |
Text label to display in tab. |
icon |
string |
'' |
Material design icon name to display (overridden by slotted icon). |
hasImageIcon |
boolean |
false |
Displays a slot to show an image icon. |
indicatorIcon |
string |
'' |
Material design icon name to display as the indicator. |
isFadingIndicator |
boolean |
false |
Indicator fades in and out instead of sliding. |
minWidth |
boolean |
false |
Shrinks tab as narrow as possible without causing text to wrap. |
isMinWidthIndicator |
boolean |
false |
Shrinks indicator to be the size of the content. |
stacked |
boolean |
false |
Stacks icon on top of label text. |
active |
boolean (readonly) |
false |
Indicates whether the tab's indicator is active. |
Methods
Name | Description |
---|---|
activate() => void |
Activates the indicator. |
deactivate() => void |
Deactivates the indicator. |
computeDimensions() => MDCTabDimensions * |
Computes the dimensions of the content. |
computeIndicatorClientRect() => ClientRect |
Computes the dimensions of the indicator. |
* See MDC's Tab
types for definition.
Events
Event Name | Target | Detail | Description |
---|---|---|---|
MDCTab:interacted |
mwc-tab |
{tabId: string} |
Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate. |
CSS Custom Properties
Name | Default | Description |
---|---|---|
--mdc-tab-height |
48px |
Height of the tab. |
--mdc-tab-horizontal-padding |
24px |
Horizontal padding on either side of the tab. |
--mdc-tab-stacked-height |
72px |
Height of the tab's stacked variant. |
--mdc-tab-text-label-color-default |
rgba(0, 0, 0, 0.6) |
Color of an unactivated tab label. |
--mdc-tab-color-default |
rgba(0, 0, 0, 0.54) |
Color of an unactivated icon. |
Global Custom Properties
This component exposes the following global theming custom properties.
Name | Description |
---|---|
--mdc-theme-primary |
Color of the activated tab's text, indicator, and ripple. |
--mdc-theme-secondary |
Color of the indicator icon if defined. |
--mdc-icon-font |
Icon font to use for icon and indicatorIcon . |
--mdc-icon-size |
Size of the text icon. |
--mdc-typography-button-<PROPERTY> |
Styles the typography of the tab label. |