menu
Dark Mode
backgroundLayer 1
preact-material-components
Components and their props
  • Tabs
    • icon-tab-bar true/false
      Makes the tab bar accomodate icons.
    • icons-with-text true/false
      Makes the tab bar accomodate icons and label.
    • activeTabIndex true/false
      Sets the bottom bar of active tab, also please use `active` prop on tab.
  • Tab
    • active true/false
      Sets the tab active along with `activeTabIndex` prop.
  • TabBarScroller
    • activeTabIndex true/false
      Sets the bottom bar of active tab, also please use `active` prop on tab.
  • TabBarScrollerTabs
    • icon-tab-bar true/false
      Makes the tab bar accomodate icons.
    • icons-with-text true/false
      Makes the tab bar accomodate icons and label.
Sample code
import {h, Component} from 'preact';
import Tabs from 'preact-material-components/Tabs';
import 'preact-material-components/Tabs/style.css';

export default class TabsPage extends Component {
  render(){
    return (
      <div>
        <Tabs className='demo-tabs'>
          <Tabs.Tab>Tab1</Tabs.Tab>
          <Tabs.Tab>Tab2</Tabs.Tab>
          <Tabs.Tab>Tab3</Tabs.Tab>
        </Tabs>
      </div>
    );
  }
}
Original documentation
This component encapsulates mdc-tabs, you can refer to its documentation here.
Demo
Default
<Tabs className="demo-tabs">
  <Tabs.Tab>Tab1</Tabs.Tab>
  <Tabs.Tab>Tab2</Tabs.Tab>
  <Tabs.Tab>Tab3</Tabs.Tab>
</Tabs>
Icons tabs bar
<Tabs className="demo-tabs" icon-tab-bar={true}>
  <Tabs.Tab>
    <Icon>favorite</Icon>
  </Tabs.Tab>
  <Tabs.Tab>
    <Icon>done</Icon>
  </Tabs.Tab>
  <Tabs.Tab>
    <Icon>info</Icon>
  </Tabs.Tab>
</Tabs>
Icons with text tabs bar
<Tabs className="demo-tabs" icons-with-text={true}>
  <Tabs.Tab>
    <Icon>favorite</Icon>
    <Tabs.TabIconLabel>Heart</Tabs.TabIconLabel>
  </Tabs.Tab>
  <Tabs.Tab active={true}>
    <Icon>done</Icon>
    <Tabs.TabIconLabel>Done</Tabs.TabIconLabel>
  </Tabs.Tab>
  <Tabs.Tab>
    <Icon>info</Icon>
    <Tabs.TabIconLabel>Info</Tabs.TabIconLabel>
  </Tabs.Tab>
</Tabs>
Scrollable tabs
<Tabs.TabBarScroller>
  <Tabs.TabBarScrollerTabs>
    <Tabs.Tab>tab1</Tabs.Tab>
    <Tabs.Tab active={true}>tab2</Tabs.Tab>
    <Tabs.Tab>tab3</Tabs.Tab>
    <Tabs.Tab>tab4</Tabs.Tab>
    <Tabs.Tab>tab5</Tabs.Tab>
    <Tabs.Tab>tab6</Tabs.Tab>
    <Tabs.Tab>tab7</Tabs.Tab>
    <Tabs.Tab>tab7</Tabs.Tab>
    <Tabs.Tab>tab9</Tabs.Tab>
    <Tabs.Tab>tab10</Tabs.Tab>
    <Tabs.Tab>tab11</Tabs.Tab>
  </Tabs.TabBarScrollerTabs>
</Tabs.TabBarScroller>