0.1.2 • Published 6 years ago
Simple React Tabs
Primitives to build simple and accessible React tabs component.
Installation
npm install a11y-react-tabs
Basic Usage
import { Tabs, TabList, Tab, TabPanel } from 'a11y-react-tabs'
export default () => {
<Tabs>
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
</TabList>
<TabPanel>
Tab Panel 1
</TabPanel>
<TabPanel>
Tab Panel 2
</TabPanel>
<TabPanel>
<Tabs>
<TabList>
<Tab>It Supports</Tab>
<Tab>Nested Tabs!</Tab>
</TabList>
<TabPanel>
Tab Panel 1
</TabPanel>
<TabPanel>
Tab Panel 2
</TabPanel>
</Tabs>
</TabPanel>
</Tabs>
}
Components
Tabs
props
| Prop | Type | Default | Description |
|---|
className optional | string | a11y-react-tabs | Class name for the <Tab /> component. |
TabList
props
| Prop | Type | Default | Description |
|---|
className optional | string | a11y-react-tabs__tablist | Class name for the <TabPanel /> component. |
Tab
props
| Prop | Type | Default | Description |
|---|
disabled optional | boolean | false | Disable the tab if set to true. |
className optional | string | a11y-react-tabs__tab | Class name for the <Tab /> component. |
selectedClassName optional | string | a11y-react-tabs__tab--selected | Class name for the active tab. |
disabledClassName optional | string | a11y-react-tabs__tab--disabled | Class name for the disabled tab. |
TabPanel
props
| Prop | Type | Default | Description |
|---|
className optional | string | a11y-react-tabs__tab-panel | Class name for the<TabPanel /> component. |
selectedClassName optional | string | a11y-react-tabs__tab-panel--selected | Class name for the active tab panel. |
Demo
TODO:
- documentation
- usage example
- tests
License
MIT