Tabs
Component for building tabs.
The <Tabs> component allows you to organize and navigate between groups of content that are related and at the same level of hierarchy .
The <Tabs.List> component is used within Tabs to group tabs that a user can switch between. The ids of the items within the must match up with a corresponding item inside the .
The <Tabs.Item> component provides a title for an individual item within a TabList.
Usage
Import
To import the component you just have to use this code below.
import { Tabs } from '@marigold/components';Appearance
| Property | Type | Description |
|---|---|---|
variant | | The available variants of this component. |
size | small | medium | large | The available sizes of this component. |
Props
| Property | Type | Default | Description |
|---|---|---|---|
isDisabled | boolean | false | Set All TabPanel disabled |
defaultSelectedKey | string | 1 | Set the default selected tab |
selectedKey | string | defaultSelectedKey | Choose the selected tab |
disabledKeys | Array of keys | none | Disable particular tabs |
gap | number | 1 | Preset the space between the tabs |
keyboardActivation | automatic | manual | automatic | Whether tabs are activated automatically on focus or manually. |
onSelectionChange | (key: Key) => any | - | Callback executed when a new tab is selected. |
Examples
Disabled Tab
A Tab can be disabled by setting the isabledKeys prop.
Preview
Code
profile
notifications
private
Tabs with default selected key
You can choose the selected key by setting the defaultSelectedKEy prop.
Preview
Code
Home
Settings
Messages
You're currently in the Settings tab. Here, you can customize your account preferences, manage privacy settings, and update your notification preferences. Personalize your experience and make the platform work exactly how you want it to.
Large Tabs Controllers
You can change the size of tab controller by setting the size prop.
Preview
Code
Mouse Settings
Keyboard Settings
Gamepad Settings