@slup/tabs v0.5.1
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>