@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