# Tab
Tab component, used to switch between different content areas.
## Basic Usage
`v-model` is the binding value, which can be of type number (index of the selected tab) or string (tab name).
:::tip Note
When `v-model` is of type `number`, `wd-tab` does not need to set `name`. Also, if the value exceeds the number of tabs, it will automatically default to 0.
:::
```html
Content {{ item }}
```
```typescript
const tab = ref(0)
```
```scss
.content {
line-height: 120px;
text-align: center;
}
```
## Name Matching
Set `name` for `wd-tab` as a unique identifier.
```html
Content {{ item }}
```
```typescript
const tabs = ref(['This', 'Is', 'An', 'Example'])
const tab = ref('Example')
```
```scss
.content {
line-height: 120px;
text-align: center;
}
```
## Using Badges 1.4.0
Use `badge-props` to set badge properties, you can refer to [Badge Component props](/component/badge#attributes).
```html
{{ item.title }} Badge
```
```typescript
const tabWithBadge = ref(0)
const tabsWithBadge = ref([
{
title: 'Normal Value',
badgeProps: {
modelValue: 10,
right: '-8px'
}
},
{
title: 'Max Value',
badgeProps: {
modelValue: 100,
max: 99,
right: '-8px'
}
},
{
title: 'Dot',
badgeProps: {
isDot: true,
right: '-8px',
showZero: true
}
}
])
```
## Auto Adjust Bottom Line Width
Set the `auto-line-width` property to automatically adjust the bottom line width to match the text content width.
```html
Content {{ tab }}
```
```typescript
const tabs = ref(['Wot', 'Design', 'Uni'])
const tab = ref('Design')
```
## Sticky Layout
Set the `sticky` property to use sticky layout. You can set the `offset-top` property to specify how many pixels from the window top before fixing the tab header. When using a custom navigation bar in `H5`, you need to refer to [sticky's offset distance](/component/sticky.html#offset-distance) for configuration.
```html
Content {{ item }}
```
## Disabled Tab
Set the `disabled` property on `wd-tab` to disable a specific tab.
```html
Content {{ item }}
```
## Click Event
Listen to the click event of tabs.
```html
Content {{ item }}
```
## Gesture Swipe
Set the `swipeable` property to support gesture swipe.
```html
Content {{ item }}
```
## Switch Animation
Set the `animated` property to enable transition animation when switching tab content.
```html
Content {{ item }}
```
## Left-aligned with Scrolling 1.4.0
When `slidable` is set to `always`, all tabs will be aligned to the left and can be scrolled when they overflow.
```html
Content {{ item }}
```