@plume-ui-react/tabs v0.0.4
Tabs
The Tabs component is a versatile and customizable component for creating tabbed interfaces in your React applications.
Installation
To use this component in your React project, follow these steps:
Install the package using npm or yarn:
npm install @plume-ui-react/tabs # Or yarn add @plume-ui-react/tabsImport the component in your JavaScript or TypeScript file:
import { Tabs } from '@plume-ui-react/tabs'Use the component in your application:
<Tabs> <TabList> <Tab label="Tab 1" /> <Tab label="Tab 2" /> <!-- Add more tabs as needed --> </TabList> <TabPanels> <TabPanel>Content for Tab 1</TabPanel> <TabPanel>Content for Tab 2</TabPanel> <!-- Add more tab panels corresponding to the tabs --> </TabPanels> </Tabs>
Properties
Tabs
This component accepts various properties to customize its appearance and behavior. Here are the available properties of the parent component:
| Property | Type | Description |
|---|---|---|
alignment | TabsAlignment | The alignment of the tabs, can be 'left', 'center', or 'right'. Defaults to 'left'. |
className | string | Additional CSS classes for the tabs. |
colorScheme | DefaultColorPalette \| keyof CustomColorPalette | The color scheme to be applied to the tabs. This can be a color from the default palette or a custom color palette key. Defaults to '#d3d3d3'. |
index | number | The index of the initially active tab. Defaults to 0. |
isLazy | boolean | Determines whether the tab panels are lazily loaded. Defaults to false. |
onChange | (index: number) => void | A callback function triggered when a tab is clicked. It receives the index of the clicked tab as an argument. |
orientation | TabsOrientation | The orientation of the tabs, can be 'horizontal' or 'vertical'. Defaults to 'horizontal'. |
size | Size | The size of the tabs, can be 'sm', 'md', or 'lg'. Defaults to 'md'. |
style | CSSProperties | Custom styles for the tabs. |
variant | 'underline' \| 'rounded' \| 'enclosed' \| 'segment' \| 'unstyled' | The visual style variant of the tabs, can be 'underline', 'rounded', 'enclosed', 'segment', or 'unstyled'. Defaults to 'underline'. |
Tab
| Property | Type | Description |
|---|---|---|
className | string | Additional CSS classes for custom styling. |
disabled | boolean | Indicates if the tab is disabled. |
extraContentLeft | ReactNode | Additional left content of the tab. |
extraContentRight | ReactNode | Additional right content of the tab. |
index | number | Index of the tab in the set of tabs. |
isActive | boolean | Indicates if the tab is active. |
label | string | Text of the tab label. |
Usage Examples
Here are some examples of how you can use this Tabs component in your project:
Basic Horizontal Tabs
<Tabs>
<TabList>
<Tab label="Tab 1" />
<Tab label="Tab 2" />
</TabList>
<TabPanels>
<TabPanel>Content for Tab 1</TabPanel>
<TabPanel>Content for Tab 2</TabPanel>
</TabPanels>
</Tabs>Vertical Tabs
<Tabs orientation="vertical">
<TabList>
<Tab label="Tab 1" />
<Tab label="Tab 2" />
</TabList>
<TabPanels>
<TabPanel>Content for Tab 1</TabPanel>
<TabPanel>Content for Tab 2</TabPanel>
</TabPanels>
</Tabs>Enclosed Style Tabs
<Tabs variant="enclosed">
<TabList>
<Tab label="Tab 1" />
<Tab label="Tab 2" />
</TabList>
<TabPanels>
<TabPanel>Content for Tab 1</TabPanel>
<TabPanel>Content for Tab 2</TabPanel>
</TabPanels>
</Tabs>Lazy Loading Tabs
<Tabs isLazy>
<TabList>
<Tab label="Tab 1" />
<Tab label="Tab 2" />
</TabList>
<TabPanels>
<TabPanel>
<LazyLoadedContent1 />
</TabPanel>
<TabPanel>
<LazyLoadedContent2 />
</TabPanel>
</TabPanels>
</Tabs>The Tabs component is a versatile solution for creating tabbed interfaces in React applications. It provides a flexible and customizable way to organize and present content in tabbed format, enhancing user experience and navigation.