# @material/mwc-tab > Material Design tab web component Latest version **0.27.0** (published 2022-08-12) · Apache-2.0 license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install @material/mwc-tab pnpm add @material/mwc-tab yarn add @material/mwc-tab bun add @material/mwc-tab ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 0.27.0 | | Published | 2022-08-12 | | First published | 2019-06-05 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 6 | | Unpacked size | 70.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 11269 | | Maintainers | yefim, abhiomkar, azakus, bicknellr, material-admin, aprigogin, patrickrodee, aomarks, emarquez, allanchen, esgonzalez, asyncliz, candysonya, ssuarez, taylorv | | Keywords | material design, web components, tab | ## Links - npm: https://www.npmjs.com/package/@material/mwc-tab - Repository: https://github.com/material-components/material-components-web-components - Homepage: https://github.com/material-components/material-components-web-components#readme - Issues: https://github.com/material-components/material-components-web-components/issues - npm.io page: https://npm.io/package/@material/mwc-tab ## Dependencies (6) - [lit](https://npm.io/package/lit.md) ^2.0.0 - [tslib](https://npm.io/package/tslib.md) ^2.0.1 - [@material/tab](https://npm.io/package/@material/tab.md) =14.0.0-canary.53b3cad2f.0 - [@material/mwc-base](https://npm.io/package/@material/mwc-base.md) ^0.27.0 - [@material/mwc-ripple](https://npm.io/package/@material/mwc-ripple.md) ^0.27.0 - [@material/mwc-tab-indicator](https://npm.io/package/@material/mwc-tab-indicator.md) ^0.27.0 ## Alternatives - [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads - [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads - [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads - [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads - [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads ## Recent versions - 0.27.0 (latest) — 2022-08-12 - 0.26.0-canary.0af8ade5.0 (canary) — 2022-02-07 - 0.26.1 — 2022-05-09 - 0.26.0 — 2022-05-03 - 0.26.0-canary.69ba13b7.0 — 2022-01-19 - 0.26.0-canary.893fc857.0 — 2022-01-07 - 0.26.0-canary.2afff08e.0 — 2022-01-06 - 0.26.0-canary.b9d35b69.0 — 2022-01-05 - 0.26.0-canary.e1bcf14e.0 — 2021-12-28 - 0.26.0-canary.cf7ba5a9.0 — 2021-12-10 - 0.26.0-canary.3b2452cc.0 — 2021-12-09 - 0.26.0-canary.0547aeeb.0 — 2021-12-06 - 0.26.0-canary.345c2bb9.0 — 2021-12-02 - 0.26.0-canary.8067ce28.0 — 2021-11-04 - 0.26.0-canary.448f6cb9.0 — 2021-11-04 - … 691 more at https://npm.io/package/@material/mwc-tab/versions ## README # `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab.svg)](https://www.npmjs.com/package/@material/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](https://material.io/components/tabs/) [Demo](https://material-components.github.io/material-web/demos/tabs/) ## Installation ```sh 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](https://github.com/material-components/material-components-web-components#quick-start) > for detailed instructions. ## Example usage For usage please see [mwc-tab-bar](https://github.com/material-components/material-web/tree/master/packages/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](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab/types.ts#L29) 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` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab/images/color_0,0,0,60.png) `rgba(0, 0, 0, 0.6)` | Color of an unactivated tab label. `--mdc-tab-color-default` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of an unactivated icon. #### Global Custom Properties This component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md) 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-` | Styles the typography of the tab label. ## Additional references - [MDC Web tabs](https://material.io/components/tabs/) --- _Source: https://npm.io/package/@material/mwc-tab · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._