For navigating between sections of related content.
import { Tab, Tabs } from "@nulogy/components";
<Tabs>
<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 { Tab, Tabs } from "@nulogy/components";
<Tabs fitted>
<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>
If custom behaviour is needed for the Tabs component, using the onTabClick and selectedIndex props allows for a controlled use of Tabs. onTabClick will be passed into all provided Tab components, and runs with arguments onClick(event, index). onClick can still be individually applied to each Tab component optionally as well.
import { Tab, Tabs } from "@nulogy/components";
class ControlledTabs extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedIndex: null
};
this.setSelectedTab = this.setSelectedTab.bind(this);
}
setSelectedTab(e, index) {
this.setState({ selectedIndex: index });
}
render() {
const { selectedIndex } = this.state;
return (
<>
<Tabs onTabClick={this.setSelectedTab} selectedIndex={selectedIndex}>
<Tab label="Tab 1">Uncontrolled Content: Tab 1</Tab>
<Tab label="Tab 2">Uncontrolled Content: Tab 2</Tab>
<Tab label="Tab 3">Uncontrolled Content: Tab 3</Tab>
<Tab label="Tab 4">Uncontrolled Content: Tab 4</Tab>
</Tabs>
{selectedIndex !== null && <div>Controlled Content: Tab {selectedIndex + 1}</div>}
</>
);
}
}
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.
Name | Type | Default | Description |
---|---|---|---|
defaultSelectedIndex | Number | null | Index of the tab that is selected when rendered. |
fitted | Boolean | false | Sets the tab components to equally take up the width of the tabs container. |
renderTabContentOnlyWhenSelected | Boolean | false | Causes hidden tab content to only be rendered when the tab is selected. |
selectedIndex | Number | undefined | Index of selected tab if controlling the tabs component. |
onTabClick | Function | undefined | On click function passed to each tab component used when controlling the tabs component. Runs with arguments onClick(event, index). |
className | String | null | className passed to the Tabs component |
tabContentClassName | string | null | className passed to the tab content container |
tabContentClassName | string | null | className passed to the tab content container |
ariaLabelLeft | string | null | aria label on the left arrow button when tabs are scrollable |
ariaLabelRight | string | null | aria label on the right arrow button when tabs are scrollable |