# 标签菜单

## 使用方法

`TabMenu` 把放不下的标签收进 `TabList` 末尾的菜单。它必须是 `TabList` 的子组件。方向键可以移到触发器上，但不会因此改掉当前标签。Enter 或 Space 打开菜单。菜单项是 `menuitemradio`，选中一项会通过列表选中对应的标签。

`label` 是没有选项被选中时的触发器文字，也是菜单的无障碍名称。某个选项就是当前标签时，触发器改显示这个选项的文字，并带上选中标签的样式。`iconClass` 是选项上的 CSS 图标类，例如 `i-carbon-settings`。

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

const value = ref('overview')
</script>

<template>
  <TabList v-model:value="value">
    <Tab value="overview">
      Overview
    </Tab>
    <Tab value="activity">
      Activity
    </Tab>
    <TabMenu
      label="More"
      :options="[
        { value: 'settings', label: 'Settings' },
        { value: 'billing', label: 'Billing' },
      ]"
    />
  </TabList>
</template>
```

## 示例

### 基本用法

Overview 和 Activity 留在标签条上。Settings 和 Billing 收在 More 里。

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

const value = ref('overview')
</script>

<template>
  <TabList v-model:value="value">
    <Tab value="overview">
      Overview
    </Tab>
    <Tab value="activity">
      Activity
    </Tab>
    <TabMenu
      label="More"
      :options="[
        { value: 'settings', label: 'Settings' },
        { value: 'billing', label: 'Billing' },
      ]"
    />
  </TabList>
</template>
```

## 属性

| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `label` | `string` | - | 没有选项被选中时的触发器文字，也是菜单的无障碍名称。 |
| `options` | `TabMenuOption[]` | - | 收在触发器后面的标签。 |

## TabMenuOption

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `value` | `string` | 交给父级 `TabList` 的标签值。 |
| `label` | `string` | 菜单项文字。这个选项被选中时，它会替换触发器文字。 |
| `iconClass` | `string` | CSS 图标类，例如 `i-carbon-settings`。 |

选中状态走父级列表的 <code>v-model:value</code>。菜单自己不发 change 事件。