Tabs
Display content within different tabs.
The Tabs component allows you to organize content into different sections that can be switched between by the user. This is useful for displaying related information in a compact and user-friendly way.
Usage
To use the Tabs component, you first need to add it to the components list of your ContentApp:
ContentApp(
components: [
Tabs(),
],
)
Then, you can use the <Tabs> and <TabItem> components in your content files:
<Tabs defaultValue="item2">
<TabItem label="Tab 1" value="item1">
This is the content for the first tab.
</TabItem>
<TabItem label="Tab 2" value="item2">
This is the content for the second tab.
You can include other components and **markdown** inside a `TabItem`.
</TabItem>
<TabItem label="Tab 3" value="item3">
This is the content for the third tab.
</TabItem>
</Tabs>
This will render a set of tabs where users can click on "Tab 1", "Tab 2", or "Tab 3" to view their respective content. In this example, "Tab 2" will be selected by default.
Tabs Properties
The <Tabs> component serves as a container for TabItems and has the following attribute:
defaultValueStringThe value of the TabItem that should be selected by default when the tabs are first rendered. If not provided, the first TabItem will be selected.
TabItem Properties
The <TabItem> component defines an individual tab and its content. It has the following attributes:
labelStringrequiredThe text that will be displayed on the tab itself.
valueStringrequiredA unique identifier for this tab. This value is used by the defaultValue attribute of the parent <Tabs> component to specify which tab to select initially.
The content nested inside a <TabItem> tag will be displayed when that tab is active. You can include any valid markdown or other custom components within a <TabItem>.