Tabs
Demo
GitHub repository
Props
| Prop | Type | Description |
|---|---|---|
children | { value: string, trigger: React.ReactNode, content: React.ReactNode }[] | An array of objects representing each tab, with a unique value, a trigger element, and tab content. |
defaultValue | string (optional) | The value of the initially selected tab. |
classNames | { root?: string; list?: string; trigger?: string; content?: string } (optional) | Custom class names for different parts of the Tabs component. |
Styles
This component allows for custom styles via the classNames prop:
root: CSS class for styling the overall Tabs component.list: CSS class for styling the list of tab triggers.trigger: CSS class for styling each tab trigger.content: CSS class for styling the content area of each tab.
Functionality
- The Tabs component enhances the organization of content into separate, easily navigable sections.
- Allows for dynamic creation of tabs based on provided data.
- Ideal for settings, segmented controls, or information categorization.