menu
Dark Mode
backgroundLayer 1
preact-material-components
Components and their props
  • Tabs
    • indicator-accent true/false
      Makes the indicator accented.
    • icon-tab-bar true/false
      Makes the tab bar accomodate icons.
    • icons-with-text true/false
      Makes the tab bar accomodate icons and label.
    • scroller true/false
      Makes the tabs scrollable
  • Tab
    • active true/false
      Makes the current tab active.
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' indicator-accent={true}>
          <Tabs.Tab>Tab1</Tabs.Tab>
          <Tabs.Tab>Tab2</Tabs.Tab>
          <Tabs.Tab>Tab3</Tabs.Tab>
        </Tabs>
      </div>
    );
  }
}
Scrollable Tabs Sample code
import {h, Component} from 'preact';
import Switch from 'preact-material-components/Switch';
import 'preact-material-components/Switch/style.css';

export default class SwitchPage extends Component {
  render(){
    return (
      <div>
        <Tabs.TabBarScroller>
            <Tabs scroller={true}>
            <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>
        </Tabs.TabBarScroller>
      </div>
    );
  }
}
Original documentation
This component encapsulates mdc-tabs, you can refer to its documentation here.
Demo
Default
With indicator accent
Icons tabs bar
Icons with test tabs bar
Scrollable tabs