0.27.0 • Published 2 years ago

@material/mwc-tab v0.27.0

Weekly downloads
5,143
License
Apache-2.0
Repository
github
Last release
2 years ago

<mwc-tab> Published on npm

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

Demo

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

NameDescription
iconSlotted icon to display. Only available if hasImageIcon or icon are defined.

Properties/Attributes

NameTypeDefaultDescription
labelstring''Text label to display in tab.
iconstring''Material design icon name to display (overridden by slotted icon).
hasImageIconbooleanfalseDisplays a slot to show an image icon.
indicatorIconstring''Material design icon name to display as the indicator.
isFadingIndicatorbooleanfalseIndicator fades in and out instead of sliding.
minWidthbooleanfalseShrinks tab as narrow as possible without causing text to wrap.
isMinWidthIndicatorbooleanfalseShrinks indicator to be the size of the content.
stackedbooleanfalseStacks icon on top of label text.
activeboolean (readonly)falseIndicates whether the tab's indicator is active.

Methods

NameDescription
activate() => voidActivates the indicator.
deactivate() => voidDeactivates the indicator.
computeDimensions() => MDCTabDimensions*Computes the dimensions of the content.
computeIndicatorClientRect() => ClientRectComputes the dimensions of the indicator.

* See MDC's Tab types for definition.

Events

Event NameTargetDetailDescription
MDCTab:interactedmwc-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

NameDefaultDescription
--mdc-tab-height48pxHeight of the tab.
--mdc-tab-horizontal-padding24pxHorizontal padding on either side of the tab.
--mdc-tab-stacked-height72pxHeight of the tab's stacked variant.
--mdc-tab-text-label-color-defaultnpm.io rgba(0, 0, 0, 0.6)Color of an unactivated tab label.
--mdc-tab-color-defaultnpm.io rgba(0, 0, 0, 0.54)Color of an unactivated icon.

Global Custom Properties

This component exposes the following global theming custom properties.

NameDescription
--mdc-theme-primaryColor of the activated tab's text, indicator, and ripple.
--mdc-theme-secondaryColor of the indicator icon if defined.
--mdc-icon-fontIcon font to use for icon and indicatorIcon.
--mdc-icon-sizeSize of the text icon.
--mdc-typography-button-<PROPERTY>Styles the typography of the tab label.

Additional references

0.27.0

2 years ago

0.26.1

2 years ago

0.26.0

2 years ago

0.25.3

3 years ago

0.25.2

3 years ago

0.25.1

3 years ago

0.23.0

3 years ago

0.22.1

3 years ago

0.22.0

3 years ago

0.21.0

3 years ago

0.20.0

3 years ago

0.19.1

4 years ago

0.19.0

4 years ago

0.18.0

4 years ago

0.17.2

4 years ago

0.17.0

4 years ago

0.16.1

4 years ago

0.15.0

4 years ago

0.14.1

4 years ago

0.14.0

4 years ago

0.13.0

4 years ago

0.12.0

4 years ago

0.11.0

4 years ago

0.11.1

4 years ago

0.10.0

5 years ago

0.9.1

5 years ago

0.9.0

5 years ago

0.8.0

5 years ago

0.7.1

5 years ago

0.7.0

5 years ago

0.6.0

5 years ago