@kelvininc/ui-components
Version:
Kelvin UI Components
94 lines (60 loc) • 5.43 kB
Markdown
<!-- Auto Generated Below -->
## Usage
### React
```tsx
import React from 'react';
import { KvTabItem } from '@kelvininc/react-ui-components';
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 |
| --------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ---------------------- |
| `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` |
| `hasNotification` | `has-notification` | (optional) To show/hide notification icon or not | `boolean` | `false` |
| `icon` | `icon` | (optional) The tab's icon | `EIconName` | `undefined` |
| `label` _(required)_ | `label` | (required) Name to show in UI for this tab | `string` | `undefined` |
| `notificationColor` | `notification-color` | (optional) The tab's notification color (hex value, rgb or css var format) | `string` | `''` |
| `selected` | `selected` | (optional) To set this tab as the selected one | `boolean` | `false` |
| `size` | `size` | (optional) Sets this tab item to a different styling configuration | `EComponentSize.Large \| EComponentSize.Small` | `EComponentSize.Large` |
| `tabKey` _(required)_ | `tab-key` | (required) A unique identifier for this tab | `number \| string` | `undefined` |
## Events
| Event | Description | Type |
| ------------- | -------------------------------- | ------------------------------- |
| `tabSelected` | Emitted when the tab is selected | `CustomEvent<number \| string>` |
## Shadow Parts
| Part | Description |
| -------- | -------------------- |
| `"icon"` | The tab's item icon. |
## CSS Custom Properties
| Name | Description |
| ----------------------- | --------------------------------- |
| `--tab-item-icon-color` | The color of tab navigation icon; |
| `--tab-item-icon-size` | The size of tab navigation icon; |
## 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
```
----------------------------------------------