@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>;

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG