Tab Set

Implementation#

import { TabSet, TabItem } from "slipstream-ui";

const Example = () => (
  <TabSet>
    <TabItem active={active}>Home</TabItem>
    <TabItem>About</TabItem>
    <TabItem>Projects</TabItem>
    <TabItem>Contact</TabItem>
  </TabSet>
);

Default Example#

Example

<TabSet>
  <TabItem active>Home</TabItem>
  ...
</TabSet>

Border#

Example

<TabSet border>
  <TabItem active>Home</TabItem>
  ...
</TabSet>

Background#

Example

<TabSet background>
  <TabItem active>Home</TabItem>
  ...
</TabSet>

Vertical#

Example

<TabSet vertical background>
  <TabItem active>Home</TabItem>
  ...
</TabSet>

Right-To-Left (rtl)#

Example

<TabSet background>
  <TabItem active>Home</TabItem>
  ...
</TabSet>

Props#

TabSet#

Attribute	Type	Value	Default Value	Description
background	boolean	true/false	undefined	Set background color to active and pseudo states of TabItem components
border	boolean	true/false	undefined	Set border color to active and pseudo states of TabItem components
vertical	boolean	true/false	undefined	Set TabItem components to vertical alignment
tag	string	nav/ul/div	nav	Change TabSet container element to different HTML elements
tabs	object	TabItemMappedProps[]	undefined	When defined maps tabs automatically as children components
rtl	boolean	true/false	undefined	When true, sets element to direction of right-to-left (rtl)

TabItem#

Attribute	Type	Value	Default Value	Description
active	boolean	true/false	undefined	When true, sets UI to active state and adds "active" class to element
background	boolean	true/false	undefined	Inherit from TabSet
border	boolean	true/false	undefined	Inherit from TabSet
tag	string	li/a/div/input	a	Change TabItem element to different HTML elements