# @rmwc/tabs

> Tabs make it easy to explore and switch between different views.

Latest version **14.3.5** (published 2024-10-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rmwc/tabs
pnpm add @rmwc/tabs
yarn add @rmwc/tabs
bun add @rmwc/tabs
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 14.3.5 |
| Published | 2024-10-24 |
| First published | 2018-09-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 34.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1657 |
| Author | rmwc |
| Maintainers | jamesmfriedman |
| Keywords | rmwc |

## Links

- npm: https://www.npmjs.com/package/@rmwc/tabs
- Repository: https://github.com/rmwc/rmwc
- Homepage: https://github.com/rmwc/rmwc/tree/master/packages/tabs
- Issues: https://github.com/rmwc/rmwc/issues
- npm.io page: https://npm.io/package/@rmwc/tabs

## Dependencies (8)

- [@rmwc/base](https://npm.io/package/@rmwc/base.md) 14.3.5
- [@rmwc/icon](https://npm.io/package/@rmwc/icon.md) 14.3.5
- [@rmwc/types](https://npm.io/package/@rmwc/types.md) 14.3.5
- [@rmwc/ripple](https://npm.io/package/@rmwc/ripple.md) 14.3.5
- [@material/tab](https://npm.io/package/@material/tab.md) ^14.0.0
- [@material/tab-bar](https://npm.io/package/@material/tab-bar.md) ^14.0.0
- [@material/tab-scroller](https://npm.io/package/@material/tab-scroller.md) ^14.0.0
- [@material/tab-indicator](https://npm.io/package/@material/tab-indicator.md) ^14.0.0

## Recent versions

- 14.3.5 (latest) — 2024-10-24
- 14.0.2-alpha.7 (next) — 2023-10-30
- 14.3.4 — 2024-09-25
- 14.3.3 — 2024-08-30
- 14.3.2 — 2024-08-19
- 14.3.1 — 2024-07-19
- 14.3.0 — 2024-07-18
- 14.2.9 — 2024-07-03
- 14.2.8 — 2024-07-01
- 14.2.7 — 2024-06-30
- 14.2.6 — 2024-06-28
- 14.2.5 — 2024-06-26
- 14.2.2 — 2024-04-24
- 14.2.1 — 2024-04-17
- 14.2.0 — 2024-04-17
- … 158 more at https://npm.io/package/@rmwc/tabs/versions

## README

# Tabs

Tabs make it easy to explore and switch between different views.

- Module **@rmwc/tabs**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/tabs/styles';
  - Or include stylesheets
    - **'@material/tab-bar/dist/mdc.tab-bar.css'**
    - **'@material/tab/dist/mdc.tab.css'**
    - **'@material/tab-scroller/dist/mdc.tab-scroller.css'**
    - **'@material/tab-indicator/dist/mdc.tab-indicator.css'**
    - **'@material/ripple/dist/mdc.ripple.css'**
    - **'@rmwc/icon/icon.css'**
- MDC Docs: [https://material.io/develop/web/components/tabs/tab-bar/](https://material.io/develop/web/components/tabs/tab-bar/)

## Basic Usage

Tabs can be either controlled or uncontrolled just like inputs. Use the `activeTabIndex` and `onActivate` callback for controlled components.

```jsx
<TabBar>
  <Tab>Cookies</Tab>
  <Tab>Pizza</Tab>
  <Tab>Icecream</Tab>
</TabBar>
```

```jsx
function Example() {
  const [activeTab, setActiveTab] = React.useState(0);

  return (
    <TabBar
      activeTabIndex={activeTab}
      onActivate={(evt) => setActiveTab(evt.detail.index)}
    >
      <Tab>Cookies</Tab>
      <Tab>Pizza</Tab>
      <Tab>Icecream</Tab>
    </TabBar>
  );
}
```

## Variants

```jsx
<TabBar>
  <Tab>Cookies</Tab>
  <Tab>Pizza</Tab>
  <Tab>Icecream</Tab>
</TabBar>
```

```jsx
<TabBar>
  <Tab icon="star_border" label="Cookies" />
  <Tab icon="favorite_border" label="Pizza" />
  <Tab icon="mood" label="Icecream" />
</TabBar>
```

```jsx
<TabBar>
  <Tab icon="star_border" />
  <Tab icon="favorite_border" />
  <Tab icon="mood" />
</TabBar>
```

```jsx
<TabBar>
  <Tab stacked icon="star_border" label="Cookies" />
  <Tab stacked icon="favorite_border" label="Pizza" />
  <Tab stacked icon="mood" label="Icecream" />
</TabBar>
```

```jsx
<TabBar>
  <Tab stacked restrictIndicator icon="star_border" label="Cookies" />
  <Tab stacked restrictIndicator icon="favorite_border" label="Pizza" />
  <Tab stacked restrictIndicator icon="mood" label="Icecream" />
</TabBar>
```

```jsx
<TabBar>
  {/* Tabs automatically scroll with lots of content. */}
  <Tab>Cookies</Tab>
  <Tab>Pizza</Tab>
  <Tab>Icecream</Tab>
  <Tab>Chocolate</Tab>
  <Tab>Fishsticks</Tab>
  <Tab>Ratatouille</Tab>
  <Tab>Bread</Tab>
  <Tab>Rolls</Tab>
  <Tab>Sushi</Tab>
  <Tab>Cupcake</Tab>
  <Tab>Cheesecake</Tab>
</TabBar>
```

## Transitions

```jsx
<TabBar>
  <Tab>Cookies</Tab>
  <Tab>Pizza</Tab>
  <Tab>Icecream</Tab>
</TabBar>
```

## Icons as Indicators

`material-components-web` has some light support for using icons as indicators (it's buried in their docs but there are no working examples or demos). Support has been added to RMWC, but your mileage may vary since it will require quite a bit of manual positioning and styling. By default, the icons appear full size at the center of the tab, effectively making them overlay images.

```jsx
<TabBar>
  <Tab iconIndicator="star">Cookies</Tab>
  <Tab iconIndicator="favorite">Pizza</Tab>
  <Tab iconIndicator="mood">Icecream</Tab>
</TabBar>
```

```jsx
<>
  {function IconIndicatorExample() {
    const style = {
      transformOrigin: 'center center',
      transform: 'translateY(1rem) scale(0.45)'
    };

    return (
      <TabBar>
        <Tab
          label="Cookies"
          iconIndicator={{
            icon: 'star',
            style: style
          }}
        />
        <Tab
          label="Pizza"
          iconIndicator={{
            icon: 'favorite',
            style: style
          }}
        />
        <Tab
          label="Icecream"
          iconIndicator={{
            icon: 'mood',
            style: style
          }}
        />
      </TabBar>
    );
  }}
</>
```

## TabBar
The TabBar component

### Props

| Name | Type | Description |
|------|------|-------------|
| `activeTabIndex` | `number` | The index of the active tab. |
| `foundationRef` | `Ref<null \| MDCTabBarFoundation<>>` | Advanced: A reference to the MDCFoundation. |
| `indicatorTransition` | `"slide" \| "fade"` | Specifies whether the indicator should slide or fade. Defaults to slide. |
| `onActivate` | `(evt: TabBarOnActivateEventT) => void` | Callback when the active tab changes. Receives event as an argument with event.target.value set to the activeTabIndex. evt.detail = { index: number; } |


## Tab
A Tab component

### Props

| Name | Type | Description |
|------|------|-------------|
| `children` | `ReactNode` | The label for the tab, passed as children. |
| `focusOnActivate` | `boolean` | Focuses the tab when activated. Defaults to true. |
| `foundationRef` | `Ref<null \| MDCTabFoundation<>>` | Advanced: A reference to the MDCFoundation. |
| `icon` | `IconPropT` | The icon to use for the tab. |
| `iconIndicator` | `IconPropT` | Optionally use a custom icon for the active indicator, instead of the underline. |
| `label` | `any` | A label for the tab. |
| `minWidth` | `boolean` | Indicates that the tab should shrink in size to be as narrow as possible without causing text to wrap. |
| `onInteraction` | `(evt: TabOnInteractionEventT) => void` | Fires when a tab has been interacted with. This is captures both keyboard and click events. evt.detail = { tabId: string } |
| `restrictIndicator` | `boolean` | Restricts the indicator to the content |
| `stacked` | `boolean` | Stacks the icon on top of the text label |

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