Unverified Commit 3bbb6c9e authored by Daniel's avatar Daniel Committed by GitHub

Added a styled tab component (#29)

- Leverages existing bootstrap-react tab components
parent 8def1174
import * as React from 'react';
import { Tab, Tabs } from 'react-bootstrap';
import './styles.scss';
export interface TabsProps {
tabs: TabInfo[];
defaultTab?: string;
onSelect?: (key: string) => void;
}
interface TabInfo {
content: JSX.Element;
key: string;
title: string;
}
const TabsComponent: React.SFC<TabsProps> = ({tabs, defaultTab, onSelect}) => {
return (
<Tabs
id="tab"
className="tabs-component"
defaultActiveKey={ defaultTab }
onSelect={ onSelect }
>
{
tabs.map((tab) => {
return (
<Tab title={ tab.title } eventKey={ tab.key } key={ tab.key }>
{ tab.content }
</Tab>
)
})
}
</Tabs>
)
};
export default TabsComponent;
@import 'variables';
.tabs-component {
.nav.nav-tabs {
border: none;
> li {
&.active > a {
&,
&:hover {
color: $gradient-4;
}
&:after {
opacity: 1;
}
}
> a {
background: none;
border: none;
color: $gray-light;
font-size: $font-size-large;
line-height: $line-height-large;
&:hover {
color: $text-color;
}
// Active tab indicator
&:after {
border: 2px solid $gradient-4;
bottom: 0;
content: "";
left: 0;
opacity: 0;
position: absolute;
transition: opacity 200ms ease-in;
width: 100%;
}
}
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment