# @material/mwc-tab-bar

> Material Design tab bar 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-bar
pnpm add @material/mwc-tab-bar
yarn add @material/mwc-tab-bar
bun add @material/mwc-tab-bar
```

## 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 | 7 |
| Unpacked size | 43.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11254 |
| Maintainers | yefim, abhiomkar, azakus, bicknellr, material-admin, aprigogin, patrickrodee, aomarks, emarquez, allanchen, esgonzalez, asyncliz, candysonya, ssuarez, taylorv |
| Keywords | material design, web components, tab bar |

## Links

- npm: https://www.npmjs.com/package/@material/mwc-tab-bar
- 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-bar

## Dependencies (7)

- [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-tab](https://npm.io/package/@material/mwc-tab.md) ^0.27.0
- [@material/tab-bar](https://npm.io/package/@material/tab-bar.md) =14.0.0-canary.53b3cad2f.0
- [@material/mwc-base](https://npm.io/package/@material/mwc-base.md) ^0.27.0
- [@material/mwc-tab-scroller](https://npm.io/package/@material/mwc-tab-scroller.md) ^0.27.0

## 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
- … 690 more at https://npm.io/package/@material/mwc-tab-bar/versions

## README

# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)
> 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-bar
```

> 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

### Basic

<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab-bar/images/basic.png" width="600px">

```html
<mwc-tab-bar>
  <mwc-tab label="Tab one"></mwc-tab>
  <mwc-tab label="Tab two"></mwc-tab>
  <mwc-tab label="Tab three"></mwc-tab>
</mwc-tab-bar>

<script type="module">
  import '@material/mwc-tab-bar/mwc-tab-bar.js';
  import '@material/mwc-tab/mwc-tab.js';
</script>
```

### Preselected

<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab-bar/images/active-index.png" width="600px">

```html
<mwc-tab-bar activeIndex="1">
  <mwc-tab label="Tab one"></mwc-tab>
  <mwc-tab label="Tab two"></mwc-tab>
  <mwc-tab label="Tab three"></mwc-tab>
</mwc-tab-bar>
```

### Icons

<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab-bar/images/icons.png" width="600px">

```html
<mwc-tab-bar>
  <mwc-tab label="Tab one" icon="accessibility"></mwc-tab>
  <mwc-tab label="Tab two" icon="exit_to_app"></mwc-tab>
  <mwc-tab label="Tab three" icon="camera"></mwc-tab>
</mwc-tab-bar>
```

### Image / Slotted Icons

<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab-bar/images/image-icons.png" width="600px">

```html
<mwc-tab-bar>
  <mwc-tab label="Tab one" hasImageIcon>
    <!-- margin bottom is (24px - height) / 2 -->
    <svg
        slot="icon"
        width="10px"
        height="10px"
        style="margin-bottom:7px;">
      <circle
          r="5px"
          cx="5px"
          cy="5px"
          color="red">
      </circle>
    </svg>
  </mwc-tab>
  <mwc-tab label="Tab two" hasImageIcon>
    <svg
        slot="icon"
        width="10px"
        height="10px"
        style="margin-bottom:7px;">
      <rect
          width="10px"
          height="10px"
          color="green">
      </rect>
    </svg>
  </mwc-tab>
  <mwc-tab label="Tab three" hasImageIcon>
    <svg
        slot="icon"
        width="14.143px"
        height="14.143px"
        style="margin-bottom:4.928px;">
      <rect
          width="10px"
          height="10px"
          color="blue"
          y="2.071px"
          x="2.071px"
          style="transform:rotate(45deg);transform-origin:center;">
      </rect>
    </svg>
  </mwc-tab>
</mwc-tab-bar>
```

### Stacked Icons

<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab-bar/images/stacked-icons.png" width="600px">

```html
<mwc-tab-bar>
  <mwc-tab label="tab one" icon="accessibility" stacked></mwc-tab>
  <mwc-tab label="tab two" icon="exit_to_app" stacked></mwc-tab>
  <mwc-tab label="tab three" icon="camera" stacked></mwc-tab>
</mwc-tab-bar>
```

### Min-width Indicator (w/ stacked icon)

<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab-bar/images/min-width.png" width="600px">

```html
<mwc-tab-bar>
  <mwc-tab
      label="tab one"
      icon="accessibility"
      stacked
      isMinWidthIndicator>
  </mwc-tab>
  <mwc-tab
      label="tab two"
      icon="exit_to_app"
      stacked
      isMinWidthIndicator>
  </mwc-tab>
  <mwc-tab
      label="tab three"
      icon="camera"
      stacked
      isMinWidthIndicator>
  </mwc-tab>
</mwc-tab-bar>
```

### Icon Indicator (w/ stacked icon)

<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab-bar/images/icon-indicator.png" width="600px">

```html
<mwc-tab-bar>
  <mwc-tab
      icon="camera"
      indicatorIcon="donut_large">
  </mwc-tab>
  <mwc-tab
      icon="accessibility"
      indicatorIcon="donut_large">
  </mwc-tab>
  <mwc-tab
      icon="exit_to_app"
      indicatorIcon="donut_large">
  </mwc-tab>
</mwc-tab-bar>
```

### Scrollable

When the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made
scrollable along the x axis.

<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab-bar/images/scrollable.png" width="600px">

```html
<style>
  mwc-tab-bar {
    border: solid black 1px;
  }
</style>
<mwc-tab-bar>
  <mwc-tab label="Tab one"></mwc-tab>
  <mwc-tab label="Tab two"></mwc-tab>
  <mwc-tab label="Tab three"></mwc-tab>
  <mwc-tab label="Tab four"></mwc-tab>
  <mwc-tab label="Tab five"></mwc-tab>
  <mwc-tab label="Tab six"></mwc-tab>
  <mwc-tab label="Tab seven"></mwc-tab>
  <mwc-tab label="Tab eight"></mwc-tab>
  <mwc-tab label="Tab nine"></mwc-tab>
  <mwc-tab label="Tab ten"></mwc-tab>
  <mwc-tab label="Tab eleven"></mwc-tab>
  <mwc-tab label="Tab twelve"></mwc-tab>
</mwc-tab-bar>
```

### Styled

_Note: example is in the state of hovering over the first tab._

<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab-bar/images/styled.png" width="600px">

```html
<style>
  mwc-tab-bar {
    --mdc-theme-primary: red;
    --mdc-text-transform: none;
    --mdc-tab-color-default: green;
    --mdc-tab-text-label-color-default: green;
    --mdc-tab-stacked-height: 100px;
  }
</style>
<mwc-tab-bar>
  <mwc-tab
      label="tab one"
      icon="accessibility"
      stacked
      isMinWidthIndicator>
  </mwc-tab>
  <mwc-tab
      label="tab two"
      icon="exit_to_app"
      stacked
      isMinWidthIndicator>
  </mwc-tab>
  <mwc-tab
      label="tab three"
      icon="camera"
      stacked
      isMinWidthIndicator>
  </mwc-tab>
</mwc-tab-bar>
```

## API

### Slots

| Name              |	Description
| ----------------- | -------------
| _default_         |	[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.

### Properties/Attributes

| Name          | Type     | Default | Description
| ------------- | -------- | ------- | -----------
| `activeIndex` | `number` | `0`     | Index of tab that is active.

### Methods

| Name     | Description
| -------- | -------------
| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.

### Events

| Event Name            | Target             | Detail            | Description
| --------------------- | ------------------ | ----------------- | -----------
| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.

### CSS Custom Properties

Inherits CSS Custom properties from:

* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)

## Additional references

- [MDC Web tabs](https://material.io/components/tabs/)

---
_Source: https://npm.io/package/@material/mwc-tab-bar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._