@pmwcs/tabs v1.1.0

Tabs

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

• Module @pmwcs/tabs
• Import styles:
  • Using CSS Loader
    • import '@pmwcs/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'
    • '@pmwcs/icon/icon.css'
• MDC Docs: 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.

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

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

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

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

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

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

<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>

<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

<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 PMWCS, 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.

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

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

Tab

A Tab component

Props