@kelvininc/ui-components
Version:
Kelvin UI Components
78 lines (50 loc) • 4.73 kB
Markdown
<!-- Auto Generated Below -->
## Usage
### React
```tsx
import React from 'react';
import { KvTabItem } from '@kelvininc/react-ui-components/client';
export const TabItemExample: React.FC = () => (
<>
{/*-- With required props --*/}
<KvTabItem tabKey="tab1" label="Tab 1" />
{/*-- Disabled --*/}
<KvTabItem tabKey="tab1" label="Tab 1" disabled></KvTabItem>
{/*-- Selected --*/}
<KvTabItem tabKey="tab1" label="Tab 1" selected></KvTabItem>
{/*-- With Notification --*/}
<KvTabItem tabKey="tab1" label="Tab 1" hasNotification></KvTabItem>
{/*-- With Notification Color --*/}
<KvTabItem tabKey="tab1" label="Tab 1" hasNotification notificationColor="#202020"></KvTabItem>
</>
);
```
## Properties
| Property | Attribute | Description | Type | Default |
| --------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ---------------------- |
| `customAttributes` | `custom-attributes` | (optional) Custom attributes to be applied to the tab element | `{ [x: string]: string; }` | `{}` |
| `customClass` | `custom-class` | (optional) Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. It is also valid to provide CssClassMap with boolean logic. | `CssClassMap \| string \| string[]` | `''` |
| `customStyle` | `custom-style` | (optional) Additional style to apply for custom CSS. | `{ [key: string]: string; }` | `undefined` |
| `disabled` | `disabled` | (optional) To disable this tab | `boolean` | `false` |
| `icon` | `icon` | (optional) Icon to show in UI for this tab | `EIconName` | `undefined` |
| `label` | `label` | (optional) Name to show in UI for this tab | `string` | `undefined` |
| `selected` | `selected` | (optional) To set this tab as the selected one | `boolean` | `false` |
| `tabKey` _(required)_ | `tab-key` | (required) A unique identifier for this tab | `number \| string` | `undefined` |
| `type` | `type` | (optional) Sets this tab item to a different styling configuration | `ETabItemType.Primary \| ETabItemType.Secondary` | `ETabItemType.Primary` |
## Events
| Event | Description | Type |
| ------------- | -------------------------------- | ------------------------------- |
| `tabSelected` | Emitted when the tab is selected | `CustomEvent<number \| string>` |
## Dependencies
### Used by
- [kv-tab-navigation](../tab-navigation)
### Depends on
- [kv-icon](../icon)
### Graph
```mermaid
graph TD;
kv-tab-item --> kv-icon
kv-tab-navigation --> kv-tab-item
style kv-tab-item fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------