Horizontal tab
Examples
Tab list and panels
Tabs are a navigational element used to show and pivot between related subsections of an interface.
Panels are wrappers that provide an accessibility link between the Tab.ListItem
and your content. Ensure your ids match to make the link.
Menu stuff 3
import Tab from '@pluralsight/ps-design-system-tab'import { P } from '@pluralsight/ps-design-system-text'import React from 'react'function Example() {const [activeIndex, setActiveIndex] = React.useState(2)const menus = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13].map(i => ({id: `example${i}`,label: `Menu ${i}`,content: `Menu stuff ${i}`}))return (<><Tab.List>{menus.map((menu, i) => (<Tab.ListItemid={menu.id}key={menu.id}onClick={() => setActiveIndex(i)}{...(i === activeIndex ? { active: true } : null)}>{menu.label}</Tab.ListItem>))}</Tab.List>{menus.map((menu, i) =>i === activeIndex ? (<Tab.Panel labelledBy={menu.id} key={menu.id}><P>{menu.content}</P></Tab.Panel>) : null)}</>)}export default Example
Usage & types
- Version
- Install
npm install @pluralsight/ps-design-system-tab
- Import
import Tab from '@pluralsight/ps-design-system-tab'
Tab
Name | Type | Description | Default |
---|---|---|---|
active | boolean | styled active (automatically set) |
|
href | string | url of resource (renders as anchor) |
|
id Required | string|number | id tying list item to panel |
|
onClick Required | Event => void | callback when list item clicked |
|
Tab.Panel
Name | Type | Description | Default |
---|---|---|---|
labelledBy Required | string|number | id tying panel to list item |
|