> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/lists/tablist.md).

# TabList

TabList let people quickly switch between sections of the view while preserving the current navigation state within each section. Via different variants you can change the meaning of the tabs. 

```tsx
import { TabList, TabItem } from 'altrone-ui';

const TABS: TabItem<number> = [
    { label: 'Tab 1', value: 1 },
    { label: 'Tab 2', value: 2 },
    { label: 'Tab 3', value: 3 },
]

const [tab, setTab] = useState<number>(1);

return <TabList selected={tab} onChange={setTab} tabs={TABS} />
```

## Tabs

### <mark style="color:blue;">TabItem</mark> <mark style="color:orange;">\<T extends unknown></mark>

This interface is available for importing only in **Altrone 2.0** and later. For older versions, you can use this framework without the imported interface.

```typescript
interface TabItem {
    label: string;
    value: T;
    disabled?: boolean;
    href?: string;
    indicator?: Indicator;
}
```

## Variants

There are three different variants of tabs:

**Default tabs.** This TabList variant looks like iOS and macOS tabs. All tabs are inside the container. The active tab has a background.

**Bordered tabs.** This TabList variant looks like Windows tabs. These tabs don't have background. The active tab has a bottom border.&#x20;

**Solid tabs.** This TabsList variant looks like a tabs in a browser. User can close tabs and open a new tabs.

### <mark style="color:blue;">TabListVariant</mark>

```typescript
enum TabListVariant {
  default = 'default',
  border = 'border',
  solid = 'solid'
}
```

## Properties <mark style="color:orange;">\<T></mark>

| Property                                              | Type                 | Description                                                   |
| ----------------------------------------------------- | -------------------- | ------------------------------------------------------------- |
| **`selected`**<mark style="color:red;">**`*`**</mark> | `T`                  | Selected tab                                                  |
| **`tabs`**<mark style="color:red;">**`*`**</mark>     | `TabItem<T>[]`       | List of tabs                                                  |
| **`onChange`**<mark style="color:red;">**`*`**</mark> | `(value: T) => void` | Callback is called when user clicks on the tab                |
| **`variant`**                                         | `TabListVariant`     | Variant of tab list                                           |
| **`fluid`**                                           | `boolean`            | If `true` TabList takes all available width                   |
| **`showCloseButtons`**                                | `boolean`            | Show close button for each tab. Works only with solid variant |
| **`showAddTabButton`**                                | `boolean`            | Show add button for each tab. Works only with solid variant   |
| **`onCloseTab`**                                      | `(value: T) => void` | Callback is called when user closes the tab                   |
| **`onAddTab`**                                        | `() => void`         | Callback is called when user clicks on "Add" button           |
| **`align`**                                           | `Align`              | Alignment of TabList                                          |

## History

* **`Altrone 1.3`**:
  * added typescript generic
* **`Altrone 1.0`**: initial release