@workday/canvas-kit-labs-react-tabs

Composable tab components

Usage no npm install needed!

<script type="module">
  import workdayCanvasKitLabsReactTabs from 'https://cdn.skypack.dev/@workday/canvas-kit-labs-react-tabs';
</script>

README

Canvas Kit React Tabs

LABS: Beta This component is work in progress and currently in pre-release.

Composable tab components

Installation

yarn add @workday/canvas-kit-labs-react-tabs

Usage

import * as React from 'react';
import {Tabs} from '@workday/canvas-kit-labs-react-tabs';

export default () => (
  <Tabs>
    <Tabs.List>
      <Tabs.Item>First Tab</Tabs.Item>
      <Tabs.Item>Second Tab</Tabs.Item>
    </Tabs.List>
    <div css={{marginTop: spacing.m}}>
      <Tabs.Panel>Contents of First Tab</Tabs.Panel>
      <Tabs.Panel>Contents of Second Tab</Tabs.Panel>
    </div>
  </Tabs>
);

Table of Contents

Tabs

Static Properties

None

Component Props

Required

children: React.ReactElement<TabListProps> | React.ReactElement<TabPanelsProps>

Tabs cannot be empty

Optional

initialTab: string

The name of the tab that should be active first. If not provided, the first tab will be active.

onTabChange: (name: string) => void

Callback when a tab changes. The name will be the name prop passed into the Tabs.Item and Tabs.Panel component. If a name isn't provided, the value will be a string of the index of the tab.

Tabs.List

Static Properties

None

Component Props

Required

children: React.ReactElement<TabProps> | React.ReactElement<TabProps>[]

TabList cannot be empty

Optional

None

Tabs.Item

Static Properties

None

Component Props

Required

children: React.ReactNode

The label text of the Tab

Optional

name: string

The name of the tab. This name will be used in change events and for initialTab. Must match the name of the associated tab panel. If this property is not provided, it will default to a string representation of the the zero-based index of the Tab when it was initialized.

Tabs.Panel

Static Properties

None

Component Props

Required

children: React.ReactNode

The contents of the TabPanel

Optional

name: string

The name of the tab. This name will be used in change events and for initialTab. Must match the name of the associated tab panel. If this property is not provided, it will default to a string representation of the the zero-based index of the Tab when it was initialized.