This package contains the Tabs, a Material Design Component which is part of a bigger ecosystem called Slup

Description

From Google's Material Design guidelines:

Installation

This package can be installed with NPM

npm install --save @slup/tabs

Usage

import { Tabs, Tab } from '@slup/tabs'

export class Test extends Component {
  tabs = [
    'item one',
    'item two',
    'item three'
  ]

  state = { selected: 0 }

  handleClick(i) {
    this.setState({ selected: i })
  }

  render() {
    return (
      <Tabs selected={this.state.selected}>
        {this.tabs.map((item, i) => {
          return (
            <Tab
              onClick={() => this.handleClick(i)}
              selected={this.state.selected === i}
            >
              {item}
            </Tab>
          )
        })}
      </Tabs>
    )
  }
}

Icons inside tabs

This example shows how to use the TabIcon component to make tabs contain an icon

import { Tabs, Tab, TabIcon } from '@slup/tabs'

export class Home extends Component {
  tabs = [
    <RandomIcon />,
    <RandomIcon />,
    <RandomIcon />
  ]

  state = { selected: 0 }

  handleClick(i) {
    this.setState({ selected: i })
  }

  render() {
    return (
      <Tabs selected={this.state.selected}>
        {this.tabs.map((item, i) => {
          return (
            <Tab
              onClick={() => this.handleClick(i)}
              selected={this.state.selected === i}
            >
              <TabIcon>
                {item}
              </TabIcon>
            </Tab>
          )
        })}
      </Tabs>
    )
  }
}

You can also add text, if needed, just put it inside a span under the TabIcon

<Tab
  onClick={() => this.handleClick(i)}
  selected={this.state.selected === i}
>
  <TabIcon>
    {item.icon}
  </TabIcon>
  <span>{item.text}</span>
</Tab>

Available properties

| Props | Type | Default | Documentation | |------------- |:-------------:|:-------------:|------: | | selected | number | 0 | Link | | onClick | function | none | Link | | center | boolean | false | Link | | primary | boolean | false | Link | | secondaryIndicator | boolean | false | Link | | scrollable | boolean | false | Link | | fit | boolean | false | Link | | secondary | boolean | false | Link |

Property: 'selected'

This property has to be applied to the Tabs and to the Tab itself to choose which item should be selected by default

Property: 'onClick'

This property has to be applied to each Tab to make it be interactive

Property: 'center' [Tabs]

Note: DO NOT use this prop while using the 'scrollable' one

This property will center each tab

<Tabs selected={this.state.selected} center></Tabs>

Property: 'primary' [Tabs]

This property will set the background of the tabs to be as the primary color of the theme

<Tabs selected={this.state.selected} primary></Tabs>

Property: 'secondaryIndicator' [Tabs]

This property will set the background of the indicator to be as the secondary color of the theme

<Tabs selected={this.state.selected} secondaryIndicator></Tabs>

Property: 'scrollable' [Tabs]

Note: DO NOT use this prop while using the 'center' one

This property will makes the tabs scrollable by using two buttons instead of the normal scrollbar in a large viewport but on mobile it will still be scrollable even without using buttons

<Tabs selected={this.state.selected} scrollable></Tabs>

Property: 'fit' [Tabs]

This property will change the width of each item to fill the entire width of the viewport

<Tabs selected={this.state.selected} fit></Tabs>

Property: 'secondary' [Tab]

This property will set the color of the selected item to be as the secondary color of the theme

<Tab secondary></Tab>