@hashicorp/react-tabs

8.2.0 • Public • Published

Tabs

Tabs will render arbitrary tabbed content based on Tab items passed as children.

Example Usage

<Tabs>
  <Tab heading="First Tab">
    <p>First tab content</p>
  </Tab>
  <Tab heading="Second Tab">
    <p>Second tab content</p>
  </Tab>
  <Tab heading="Third Tab">
    <p>Third tab content</p>
  </Tab>
</Tabs>

Component Props

Tabs

Name Type Description Required
children React.ReactNode Tab components to render. true
defaultTabIdx number If set, the tab with the specified ID will be active by default. If not set or if the ID does not match, it will default to 0 false
centered boolean If true, the tabs are centered in their container, rather than left-aligned false
fullWidthBorder boolean If true, the border line underneath the tabs expands to the full width of the container, rather than being slightly padded from the edges false

Tab

Name Type Description Required
heading string Title of the tab true
group string A unique identifier for a tab 'group' that, when active, all Tabs with this id will become active when one is selected. Note it's necessary to wrap the page with TabProvider for this feature to function. false
children React.ReactNode Content that should render when the associated tab is active. false

Readme

Keywords

none

Package Sidebar

Install

npm i @hashicorp/react-tabs

Weekly Downloads

1,755

Version

8.2.0

License

MPL-2.0

Unpacked Size

50.8 kB

Total Files

17

Last publish

Collaborators

  • prestonbourne
  • mikegolus
  • leahmariebush
  • kaitlynnefuery
  • abhishek-hashicorp
  • cameronperera
  • alexju
  • consul-ui-services
  • hashicb
  • britt.lindgren
  • paulhcp
  • nandereck
  • tstormk
  • hashibot-hds
  • lackeyjb1
  • jpogran
  • thrashr888
  • melsumner
  • didoo
  • zchsh
  • hcitsec
  • gregone
  • meirish
  • enmod
  • kaxcode
  • anubhavmishra-hashicorp
  • hashibot-web
  • cstitt-hashi
  • mocohen
  • dhaulagiri