Tab

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.

Usage

import { Tabs, TabList, TabItem, TabPanel } from "@asphalt-react/tab"

  return (
    <Tabs>
      <TabList>
        <TabItem active asProps={{ href: "?tab=1" }}>
          Tab 1
        </TabItem>
        <TabItem asProps={{ href: "?tab=2" }}>
          Tab 2
        </TabItem>
        <TabItem asProps={{ href: "?tab=3" }}>
          Tab 3
        </TabItem>
      </TabList>
      <TabPanel active>
        Content 1
      </TabPanel>
      <TabPanel>
        Content 2
      </TabPanel>
      <TabPanel>
        Content 3
      </TabPanel>
    </Tabs>
  )

Accessibility

• Use ← or → arrow keys to toggle between tabs.
• Press enter to activate the tab.
• Press tab to go out of the tablist.

Hooks

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.

useTabs

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 (
    <Tabs>
      <TabList>
        <TabItem
          active={activeIndex === 0}
          asProps={{ to: "?tab=1" }}
          {...getItemProps()}
        >
          <TabItemIcon>
            <IconPlaceholder />
          </TabItemIcon>
          <span>Tab 1</span>
        </TabItem>
        <TabItem
          active={activeIndex === 1}
          asProps={{ to: "?tab=2" }}
          {...getItemProps()}
        >
          <TabItemIcon>
            <IconPlaceholder />
          </TabItemIcon>
          <span>Tab 2</span>
        </TabItem>
        <TabItem
          active={activeIndex === 2}
          asProps={{ to: "?tab=3" }}
          {...getItemProps()}
        >
          <TabItemIcon>
            <IconPlaceholder />
          </TabItemIcon>
          <span>Tab 3</span>
        </TabItem>
      </TabList>
      <TabPanel active={activeIndex === 0}>
        <div>Content 1</div>
      </TabPanel>
      <TabPanel active={activeIndex === 1}>
        <div>Content 2</div>
      </TabPanel>
      <TabPanel active={activeIndex === 2}>
        <div>Content 3</div>
      </TabPanel>
    </Tabs>
  )
}

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. For example,

import React from "react"
import { Link } from "@reach/router"
import {
  Tabs,
  TabList,
  TabItem,
  TabPanel,
  useTabs,
} from "@asphalt-react/tab"

export const CustomOnAction = () => {

  const { activeIndex, getItemProps } = useTabs({ defaultIndex: 0, as: Link })
  const { onAction } = getItemProps()

  const handleAction = (event) => {
    // logic to handle your custom action
    onAction(event)
  }

  return (
    <Tabs>
      <TabList>
        <TabItem
          active={activeIndex === 0}
          asProps={{ to: "?tab=1" }}
          {...getItemProps()}
          onAction={handleAction}
        >
          <span>Tab 1</span>
        </TabItem>
        <TabItem
          active={activeIndex === 1}
          asProps={{ to: "?tab=2" }}
          {...getItemProps()}
          onAction={handleAction}
        >
          <span>Tab 2</span>
        </TabItem>
      </TabList>
      <TabPanel active={activeIndex === 0}>
        <div>Content 1</div>
      </TabPanel>
      <TabPanel active={activeIndex === 1}>
        <div>Content 2</div>
      </TabPanel>
    </Tabs>
  )
}

Tabs

Wrapper for all tabs and tab panels.

Props

children

React node containing content for tabs.

| type | required | default | | ---- | -------- | ------- | | node | false | N/A |

TabList

This component acts as a wrapper around all the TabItem components

Props

children

React node containing content for TabList

| type | required | default | | ---- | -------- | ------- | | node | false | N/A |

TabItem

Add tabs using this component. By default, it renders an <a> tag but you can pass your custom element or React component using as prop. Pass all the props related to the link in asProps.

Props

children

React node to render item's content.

| type | required | default | | ---- | -------- | ------- | | node | true | N/A |

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.

| type | required | default | | ----------- | -------- | ------- | | elementType | false | "a" |

asProps

Pass the props such as "href", "id" for the custom link element passed in as prop.

| type | required | default | | ------ | -------- | ------- | | object | false | N/A |

active

Marks the tab item as active.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

onAction

Function to be called when active tab changes.

| type | required | default | | ---- | -------- | ------- | | func | false | N/A |

bezel

Adds padding on all sides.

| type | required | default | | ---- | -------- | ------- | | bool | false | true |

TabItemIcon

Icon for the TabItem. Accepts SVG.

Props

children

React node for TabItem's icon. Accepts SVG.

| type | required | default | | ---- | -------- | ------- | | node | false | N/A |

TabPanel

The container for the panel content of the Tab.

Props

children

React node containing content for TabPanel.

| type | required | default | | ---- | -------- | ------- | | node | false | N/A |

active

Marks the TabPanel as active.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |