# 分段控件项

## 使用方法

分段控件里的一段，本身是个单选按钮。

```ts
import { SegmentedControlItem } from '@astryx-vue/core/SegmentedControl'
```

它是 [分段控件](/components/segmented-control) 里的一段。这一段只写自己的 `value`，选中的值放在父组件里，所以它自己不存状态，一组里永远有一段是选中的。`label` 是看得见的文字，同时也是无障碍名。想让文字前面有图案，把图标放进 `icon` 插槽；只想留图标，加 `isLabelHidden`。

## 示例

常见的用法和不同的状态。

### 基础

分段控件里只有文字的几段。每段自己写一个值，选中的值和变更处理都放在父控件上。

```vue
<script setup lang="ts">
import { SegmentedControl, SegmentedControlItem } from '@astryx-vue/core/SegmentedControl'
import { ref } from 'vue'

const view = ref('board')
</script>

<template>
  <SegmentedControl v-model="view" label="View mode">
    <SegmentedControlItem value="board" label="Board" />
    <SegmentedControlItem value="list" label="List" />
    <SegmentedControlItem value="timeline" label="Timeline" />
  </SegmentedControl>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `value` | `string` | — | 这一段的唯一值，父控件拿它和 `v-model` 比。必填。 |
| `label` | `string` | — | 这一段的名字，就是看得见的文字；藏起文字时，它变成读屏用的名字。必填。 |
| `isLabelHidden` | `boolean` | `false` | 把文字藏起来，只留图标。文字仍然通过 `aria-label` 当这一段的名称。 |
| `isDisabled` | `boolean` | `false` | 只禁用这一段。它还在原位，但点不了，方向键也会跳过它。 |

## 插槽

- `icon`：文字前面的图案。放 `Icon` 进去，大小会跟着父控件走。