Skip to content

Instantly share code, notes, and snippets.

@iMerica iMerica/app.jsx
Last active Jan 13, 2020

Embed
What would you like to do?
Tabs ++ in Grommet
class App extends Component {
state = {
activeTab: 0,
}
setTab = (i) => {
this.setState({activeTab: i})
}
render() {
return (
<Box>
<Tabs
activeTab={this.state.activeTab}
changeTab={this.setTab}
tabs={
[ {active: true, label: 'Thing 1'},
{active: false, label: 'Thing 2'}
]
}
/>
{/* Show Tab Content by Index Here */}
</Box>
)
}
}
import React from 'react';
import { Box, Button } from "grommet"
const commonBorder = {
size: "medium",
style: "solid",
side: "bottom"
}
const borders = {
true: {
...commonBorder,
color: "accent-1",
},
false: {
...commonBorder,
color: "light-2",
}
}
const Tab = (props) => {
return (
<Box
align={"center"}
style={{flexBasis: 0, flexGrow: 1}}
pad={'small'}
border={borders[props.active]}>
<Button
focusIndicator={false}
onClick={() => props.changeTab(props.index)}>
{props.label}
</Button>
</Box>
)
}
const Tabs = (props) => {
return (
<Box
width={'large'} direction={'row'} justify={'center'}>
{props.tabs.map((i, index) => {
return (
<Tab
changeTab={props.changeTab}
key={index}
index={index}
label={i.label}
active={props.activeTab === index}
/>
)
})}
</Box>
)
}
export {
Tab,
Tabs
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.