vcc-ui
Version:
VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.
58 lines (51 loc) • 911 B
Markdown
The TabNav is a wrapper container for building second level tabbed-navigation bars
### Example
```jsx live=true
<TabNav
backButton={{
text: "text",
href: "/href",
clickHandler: () => {}
}}
>
<TabNavItem>Crossover/Wagon</TabNavItem>
<TabNavItem isActive>SUV</TabNavItem>
<TabNavItem>Sedan</TabNavItem>
</TabNav>
```
### With Line Transition
```jsx live=true
() => {
const [active, setActive] = React.useState(1);
return (
<TabNav enableLineTransition>
<TabNavItem
isActive={active === 1}
onClick={() => {
setActive(1);
}}
>
Crossover/Wagon
</TabNavItem>
<TabNavItem
isActive={active === 2}
onClick={() => {
setActive(2);
}}
>
SUV
</TabNavItem>
<TabNavItem
isActive={active === 3}
onClick={() => {
setActive(3);
}}
>
Sedan
</TabNavItem>
</TabNav>
);
};
```
### Changelog
- _Added in version 0.0.45_