Tabs
Toggle content using the Tabs component
You can add any number of tabs.
pnpm: Fast, disk space efficient package manager.
import { Tab, Tabs } from "@visulima/nextra-theme-docs/components";<Tabs> <Tab title="pnpm">**pnpm**: Fast, disk space efficient package manager.</Tab> <Tab title="npm" disabled> **npm** is a package manager for the JavaScript programming language. </Tab> <Tab title="yarn">**Yarn** is a software packaging system.</Tab></Tabs>
Default Selected IndexPermalink for this section
You can use the defaultIndex prop to set the default tab index:
import { Tab, Tabs } from "@visulima/nextra-theme-docs/components";<Tabs defaultIndex="1">...</Tabs>
And you will have npm as the default tab:
APIPermalink for this section
The Tabs component takes the following props:
defaultIndexPermalink for this section
The index of the tab that should be selected by default.
- Type:
number - Default:
0
selectedIndexPermalink for this section
The index of the tab that should be selected.
- Type:
number - Default:
undefined
childrenPermalink for this section
The content of the tabs.
- Type:
React.ReactNode | React.ReactNode[]-> needs to be an array ofTabcomponents - Required:
true
onChangePermalink for this section
A callback function that is invoked when the selected tab changes.
- Type:
(index: number) => void - Default:
undefined
prefixPermalink for this section
The prefix of the tabs head key.
- Type:
string - Default:
tabs
The Tab component takes the following props:
titlePermalink for this section
The title of the tab. Short titles are easier to navigate.
- Type:
string | React.ReactNode - Required:
true
childrenPermalink for this section
The content of the tab.
- Type:
React.ReactNode - Required:
true
disabledPermalink for this section
Whether the tab is disabled.
- Type:
boolean - Default:
false
storageKeyPermalink for this section
The key used to store the tab state in local storage.
- Type:
string - Default:
undefined
disableScrollBarPermalink for this section
Whether the tab should disable the scroll bar.
- Type:
boolean - Default:
false
classesPermalink for this section
The classes used to style the tab and tabs (root).
- Type:
object- tab:
string - tabs:
string
- tab:
- Default:
undefined