@paprika/tabs
Description
Tabs component displays tabs with panels associated with each tab
Installation
yarn add @paprika/tabs
or with npm:
npm install @paprika/tabs
Props
Tabs
| Prop | Type | required | default | Description |
|---|---|---|---|---|
| a11yText | string | false | null | Description of the purpose of the tabs for assistive technology. |
| children | node | true | - | Expects Tabs.List (mandatory) and Tabs.Panels (optional). |
| defaultIndex | number | false | undefined | Sets what tabindex is active by default (uncontrolled component). Use null for no active tab. |
| hasInsetFocusStyle | bool | false | false | If the visual focus ring for the tabs should be displayed with an inset style. |
| hasTruncation | bool | false | false | Tab labels will be truncated when they run out of space instead of breaking to multiple lines (ignored when isVertical is false). |
| index | number | false | undefined | Sets what tabindex is active (controlled component). Use null for no active tab. |
| isDisabled | bool | false | false | If the tabs are all disabled. |
| isVertical | bool | false | false | If the tabs are stacked vertically. |
| kind | [ Tabs.types.kind.PRIMARY, Tabs.types.kind.SECONDARY] | false | Tabs.types.kind.PRIMARY | The visual theme of the tabs list. |
| onClickTab | func | false | null | Use this prop when you want to use Tabs as a controlled component (also you must use 'index' prop). When the user clicks on a tab, this gets fired (the tab index is passed to it). |
| size | [ Tabs.types.size.MEDIUM, Tabs.types.size.LARGE] | false | Tabs.types.size.MEDIUM | Size of the tab label text. |
| tabHeight | [number,string] | false | 48 | Height of the tabs (ignored when isVertical is true). A number value will be interpreted as height in pixels. |
Tabs.List
| Prop | Type | required | default | Description |
|---|---|---|---|---|
| children | node | true | - | List of Tabs.Tab elements. |
Tabs.Panel
| Prop | Type | required | default | Description |
|---|---|---|---|---|
| children | node | false | null | |
| isSelected | bool | false | false | Controls if the option is selected or not |
| shouldUnmount | bool | false | true | Should unmount or not when isSelected is false |
Tabs.Panels
| Prop | Type | required | default | Description |
|---|---|---|---|---|
| children | node | true | - | List of Tabs.Panel elements. |
Tabs.Tab
| Prop | Type | required | default | Description |
|---|---|---|---|---|
| a11yText | string | false | null | Descriptive text for assistive technologies. By default text of the children will be used. |
| children | node | false | null | Label for the tab |
| hasFocus | bool | false | false | Internal only: if tab has focus |
| href | string | false | null | Sets a url the tab goes to |
| isDisabled | bool | false | false | If the tab is disabled |
| isSelected | bool | false | false | Internal only: if tab is selected |
| onClick | func | false | () => {} | Internal only: callback onClick |
| onKeyDownArrows | func | false | () => {} | Internal only: callback onKeyDownArrow |
Usage
import Tabs from "@paprika/tabs";
<Tabs>
<Tabs.List>
<Tabs.Tab>Hello</Tabs.Tab>
<Tabs.Tab isDisabled>World</Tabs.Tab>
<Tabs.Tab>ABC</Tabs.Tab>
<Tabs.Tab isDisabled>Disabled Tab</Tabs.Tab>
</Tabs.List>
<Tabs.Panels>
<Tabs.Panel>Hello Tab</Tabs.Panel>
<Tabs.Panel>Disabled tab 2</Tabs.Panel>
<Tabs.Panel>ABC Tab</Tabs.Panel>
<Tabs.Panel>Disabled tab 4</Tabs.Panel>
</Tabs.Panels>
</Tabs>;