Tab
!npm
Tab allow users to navigate easily between views within the same context. It contains a list of links that can either take the user to another page or to another section on the same page. Tab is responsive and is scrollable when number of tabs exceeds it's container's width.
``jsx
import { Tabs, TabList, TabItem, TabPanel } from "@asphalt-react/tab"
return (
Tab 1
Tab 2
Tab 3
Content 1
Content 2
Content 3
)
`
* Use ā or ā arrow keys to toggle between tabs.
* Press enter to activate the tab.
* Press tab to go out of the tablist.
Tab exports a useTabs hook which returns a prop getter function and the active tab item index. Call the getter function to generate props which then can be passed in TabItem.
`jsx
import React from "react"
import { Link } from "@reach/router"
import {
Tabs,
TabList,
TabItem,
TabItemIcon,
TabPanel,
useTabs,
} from "@asphalt-react/tab"
import { IconPlaceholder } from "@asphalt-react/iconpack"
export const HooksExample = () => {
const { activeIndex, getItemProps } = useTabs({ defaultIndex: 0, as: Link })
return (
asProps={{ to: "?tab=1" }}
{...getItemProps()}
>
Tab 1
asProps={{ to: "?tab=2" }}
{...getItemProps()}
>
Tab 2
asProps={{ to: "?tab=3" }}
{...getItemProps()}
>
Tab 3
Content 1
Content 2
Content 3
)
}
`
1. useTabs accepts the following props:
* defaultIndex - The initial selected tab item index. By default, it is set to 0.as
* - Html element/React component to replace the default element. Using this prop, you can use your router's link element, such as "react-router-dom"'s Link element.
2. It returns activeIndex and a function which generates props for Tab.
* activeIndex - The active tab item index. This corresponds to the DOM order index of the tab item. By default, it is 0
* getItemProps - returns onAction(event) and as. Pass onAction in tab item to set the activeIndex. If you are using your own custom onAction handler, call this onAction(event) inside your custom handle.
Wrapper for all tabs and tab panels.
[comment]: # "Tabs Props"
React node containing content for tabs.
| type | required | default |
| ---- | -------- | ------- |
| node | false | N/A |
This component acts as a wrapper around all the TabItem components
[comment]: # "TabList Props"
React node containing content for TabList
| type | required | default |
| ---- | -------- | ------- |
| node | false | N/A |
Stretch the TabList to full width of the container
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
Add tabs using this component. By default, it renders an tag but you can pass your custom element or React component using as prop. Pass all the props related to the link in asProps.
[comment]: # "TabItem Props"
React node to render item's content.
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
Html element/React component to replace the default element. Using this prop, you can use your router's link element, such as "react-router-dom"'s Link element.
| type | required | default |
| ----------- | -------- | ------- |
| elementType | false | "a" |
Pass the props such as "href", "id" for the custom link element passed in as` prop.
| type | required | default |
| ------ | -------- | ------- |
| object | false | N/A |
Marks the tab item as active.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
Function to be called when active tab changes.
| type | required | default |
| ---- | -------- | ------- |
| func | false | N/A |
Adds padding on all sides.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | true |
Icon for the TabItem. Accepts SVG.
[comment]: # "TabItemIcon Props"
React node for TabItem's icon. Accepts SVG.
| type | required | default |
| ---- | -------- | ------- |
| node | false | N/A |
The container for the panel content of the Tab.
[comment]: # "TabPanel Props"
React node containing content for TabPanel.
| type | required | default |
| ---- | -------- | ------- |
| node | false | N/A |
Marks the TabPanel as active.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |