Tabs

For navigating between sections of related content.

children


      <Tab label="Tab 1">Tab 1 Content</Tab>
      <Tab label="Tab 2">Tab 2 Content</Tab>
      <Tab label="Tab 3">Tab 3 Content</Tab>
      <Tab label="Tab 4">Tab 4 Content</Tab>


      <Tab label="Tab 1">Tab 1 Content</Tab>
      <Tab label="Tab 2">Tab 2 Content</Tab>
      <Tab label="Tab 3">Tab 3 Content</Tab>
      <Tab label="Tab 4">Tab 4 Content</Tab>

defaultSelectedIndex

fitted

renderTabContentOnlyWhenSelected

selectedIndex

onTabClick

(e) => console.log('onTabClick', e)

(e) => console.log('onTabClick', e)

className

tabContentClassName

ariaLabelLeft

ariaLabelRight

import * as React from "react";
import { Tabs, Tab } from "@nulogy/components";

export default () => {
  return (
    <Tabs
      defaultSelectedIndex={0}
      selectedIndex={0}
      onTabClick={e => console.log("onTabClick", e)}
    >
      <Tab label="Tab 1">Tab 1 Content</Tab>
      <Tab label="Tab 2">Tab 2 Content</Tab>
      <Tab label="Tab 3">Tab 3 Content</Tab>
      <Tab label="Tab 4">Tab 4 Content</Tab>
    </Tabs>
  );
}

import * as React from "react";
import { Tabs, Tab } from "@nulogy/components";

export default () => {
  return (
    <Tabs
      defaultSelectedIndex={0}
      selectedIndex={0}
      onTabClick={e => console.log("onTabClick", e)}
    >
      <Tab label="Tab 1">Tab 1 Content</Tab>
      <Tab label="Tab 2">Tab 2 Content</Tab>
      <Tab label="Tab 3">Tab 3 Content</Tab>
      <Tab label="Tab 4">Tab 4 Content</Tab>
    </Tabs>
  );
}

Overflow

When the width of the individual Tab components exceed the total width of the Tabs component, scrolling becomes enabled and buttons are placed on the edges to make it easier to scroll to off-screen Tabs on mobile devices.

Props

Name	Type	Description
children	react node	Inner tabs.
defaultSelectedIndex	number	Index of the tab that is selected when rendered.
fitted	boolean	Sets the tab components to equally take up the width of the tabs container.
renderTabContentOnlyWhenSelected	boolean	Causes hidden tab content to only be rendered when the tab is selected.
selectedIndex	number	Index of selected tab if controlling the tabs component.
onTabClick	function	On click function passed to each tab component used when controlling the tabs component. Runs with arguments onClick(event, index).
className	string	className passed to the Tabs component
tabContentClassName	string	className passed to the tab content container
ariaLabelLeft	string	aria label on the left arrow button when tabs are scrollable
ariaLabelRight	string	aria label on the right arrow button when tabs are scrollable