@mozaic-ds/vue/src/components/tabs/README.md

Mozaic-Vue is the Vue.js implementation of ADEO Design system

# MTabs

Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.


## Props

| Name | Description | Type | Default |
| --- | --- | --- | --- | 
| `description` | A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component. | `string` | - |
| `size` | Defines the size of the tab. | `"s"` `"m"` | `"m"` |
| `divider` | If `true`, the divider will appear. | `boolean` | `true` |
| `centered` | If `true`, the tabs of the component will be centered. | `boolean` | - |
| `modelValue` | Defines the currently active tab.

- If a `number` is provided, it represents the index of the tab.
- If a `string` is provided, it must match the `id` of one of the tabs. | `string` `number` | `0` |
| `tabs*` | An array of objects that allows you to provide all the data needed to generate the content for each tab. | `{ id?: string` `undefined; icon?: Component` `undefined; badge?: number` `undefined; label: string; disabled?: boolean` `undefined; }[]` | - |

## Events

| Name | Description | Type |
| --- | --- | --- |
| `update:modelValue` | Emits when the selected tab changes, updating the modelValue prop. | [value?: string | number] |

## Dependencies

### Depends on

- [MDivider](../divider)
- [MNumberBadge](../numberbadge)

### Graph

```mermaid
graph TD;
  MTabs --> MDivider
  MTabs --> MNumberBadge
style MTabs fill:#008240,stroke:#333,stroke-width:4px
```