Tabs
Vertical and horizontal tabs.
import Tabs from 'patchkit-tabs'
// horizontal:
<Tabs tabs={['First', 'Second', 'Third']} selected={this.state.selected} onSelect={tab=>this.setState({ selected: tab })} />
// vertical:
<Tabs vertical tabs={['First', 'Second', 'Third']} selected={this.state.selected} onSelect={tab=>this.setState({ selected: tab })} />If you want the rendering to change when selected, use:
const TABS = [
{ selectedLabel: '1st!', unselectedLabel: 'First' },
{ selectedLabel: '2nd!', unselectedLabel: 'Second' },
{ selectedLabel: '3rd!', unselectedLabel: 'Third' }
]
<Tabs tabs={TABS} selected={this.state.selected} onSelect={tab=>this.setState({ selected: tab })} />Can also set className.
Styles
Use the .less file:
@import "node_modules/patchkit-tabs/styles.less"