@leafygreen-ui/tabs
leafyGreen UI Kit Tabs
Last updated 2 days ago by brookescarlett .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @leafygreen-ui/tabs 
SYNC missed versions from official npm registry.

Tabs

npm (scoped)

View on Storybook

Installation

Yarn

yarn add @leafygreen-ui/tabs

NPM

npm install @leafygreen-ui/tabs

Example

import { Tabs, Tab } from '@leafygreen-ui/tabs';

const [selected, setSelected] = useState(0)

<Tabs setSelected={setSelected} selected={selected}>
  <Tab name="Tab One">Tab Content One</Tab>
  <Tab name="Tab Two">Tab Content Two</Tab>
  <Tab name="Tab Three">Tab Content Three</Tab>
</Tabs>

Output HTML

<div>
  <div class="leafygreen-ui-4furr2" role="tablist">
    <button
      class="leafygreen-ui-17lvitv"
      role="tab"
      aria-controls="tab-0"
      aria-selected="true"
      tabindex="0"
    >
      Tab One
    </button>
    <button
      class="leafygreen-ui-6uqhxy"
      role="tab"
      aria-controls="tab-1"
      aria-selected="false"
      tabindex="-1"
    >
      Tab Two
    </button>
    <button
      class="leafygreen-ui-6uqhxy"
      role="tab"
      aria-controls="tab-2"
      aria-selected="false"
      tabindex="-1"
    >
      Tab Three
    </button>
  </div>
  <div class="leafygreen-ui-xh3r7y">
    <div class="leafygreen-ui-11283ir"></div>
  </div>
  <div
    aria-disabled="false"
    aria-selected="true"
    aria-controls="tab-0"
    role="tabpanel"
  >
    Tab Content One
  </div>
</div>

Properties

Prop Type Description Default
selected number Sets the selected tab. If selected is undefined, the <Tabs /> component will behave as an uncontrolled component.
setSelected function A callback that receives the index of the tab a user is switching to when clicking, or via keyboard navigation. Usually this is used to set the selected prop to the correct index. The function is only invoked if the selected prop is set.
as React.ElementType Sets the root element of all <Tab /> components in <Tabs />. For example, setting as to Link will render each tab as a <Link /> component rather than as a button. button
className string Adds a className to the root element.
children node <Tab /> components that will be supplied to <Tabs /> component.
darkMode boolean Determines whether or not the component will appear in DarkMode false

Any other properties supplied will be spread on the root element.

Tab

Properties

Prop Type Description Default
name (Required) string, ReactNode String that will appear in the list of tabs.
disabled boolean Indicates whether or not the <Tab /> can be clicked by a user. false
default boolean Should be supplied when using the uncontrolled <Tabs /> component. This determines which tab will be active by default.
className string Adds a className to the root element.
href string Destination when Tab's name in the list should be rendered as an a tag.
to string Destination when Tab's name in the list should be rendered as a Link tag.
children node Content that appears inside the <Tab /> component
... native attributes of component passed to as prop Any other props will be spread on the root element

Current Tags

  • 5.0.0                                ...           latest (2 days ago)

25 Versions

  • 5.0.0                                ...           2 days ago
  • 4.0.6                                ...           8 days ago
  • 4.0.5                                ...           2 months ago
  • 4.0.4                                ...           2 months ago
  • 4.0.3                                ...           3 months ago
  • 4.0.2                                ...           3 months ago
  • 4.0.1                                ...           3 months ago
  • 4.0.0                                ...           3 months ago
  • 3.0.1                                ...           4 months ago
  • 3.0.0                                ...           4 months ago
  • 2.1.6                                ...           4 months ago
  • 2.1.5                                ...           4 months ago
  • 2.1.4                                ...           5 months ago
  • 2.1.3                                ...           5 months ago
  • 2.1.2                                ...           5 months ago
  • 2.1.1                                ...           6 months ago
  • 2.1.0                                ...           9 months ago
  • 2.0.1                                ...           9 months ago
  • 2.0.0                                ...           a year ago
  • 1.0.5                                ...           a year ago
  • 1.0.4                                ...           a year ago
  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Downloads
Today 13
This Week 16
This Month 25
Last Day 0
Last Week 8
Last Month 33
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |