@paprika/tabs NPM

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