Slup - Tabs

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:

Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app.

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>