VCNKit/Tabs

@vcnkit/tabs is intended to be a lightweight React material tabs bar.

Installation

NPM

$ npm install --save @vcnkit/tabs

Yarn

$ yarn add @vcnkit/tabs

Usage

The tabs container can be used to simulate an easy to implement material tabs bar.

The container accepts the following props:

| Prop | Description | |----------------|---------------------------------------------------------------------------------------------------| | width | If undefined tries to take all the available width of the parent. | | indicatorColor | The color of the tab indicator. | | onSelect | Function with the tab's key parameter that gets called when the selection changes. | | selected | The key of the tab to select. By default the first tab is selected, if there is no selected prop. |

import * as Tabs from '@vcnkit/tabs';

const SomeComponent = () => (
    <Tabs.Container width="4" indicatorColor="#5282B5">
        <Tabs.Tab key="tab">SomeTitle</Tabs.Tab>
    </Tabs.Container>
);

The Tab-component accepts one prop; 'key'. It's pretty self-explanatory.

import * as Tabs from '@vcnkit/tabs';

const SomeComponent = () => (
    <Tabs.Container width="4" indicatorColor="rgba(255, 30, 30, 0.75)" selected="tab2">
        <Tabs.Tab key="tab1">SomeTitle 1</Tabs.Tab>
        <Tabs.Tab key="tab2">SomeTitle 2</Tabs.Tab>
        <Tabs.Tab key="tab3">SomeTitle 3</Tabs.Tab>
    </Tabs.Container>
);