# 标签

## 使用方法

标签页里的一个标签。它渲染成按钮或者链接，选中时换一套样式，还能带图标。

`Tab` 的选中状态和尺寸都从外面的 `TabList` 读，所以要放在 `TabList` 里用。默认插槽是标签文字。没选中时显示 `icon`，选中时换成 `selectedIcon`；`endContent` 跟在文字后面，用来放徽标或状态点。写了 `href` 就渲染成链接；如果外层是 `role="tablist"`，那它就用 `panelId` 指向自己那块内容面板。

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

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

<template>
  <TabList v-model:value="value">
    <Tab value="inbox">
      收件箱
    </Tab>
    <Tab value="sent">
      已发送
    </Tab>
  </TabList>
</template>
```

## 示例

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

### 选中换图标

选中之后图标会换一个的标签。

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

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

<template>
  <TabList v-model:value="value">
    <Tab value="favorites">
      <template #icon>
        <span class="css-icon css-icon--sm i-carbon-star" />
      </template>
      <template #selectedIcon>
        <span class="css-icon css-icon--sm i-carbon-star-filled" />
      </template>
      Favorites
    </Tab>
    <Tab value="recent">
      Recent
    </Tab>
  </TabList>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `value` | `string` | — | 这个标签的唯一标识。外面的 `TabList` 拿自己的 `value` 和它比，决定谁被选中。必填。 |
| `label` | `string` | — | 显示的文字。默认插槽和它同时写时插槽优先，这时它就成了文字藏起来后的读屏名。 |
| `panelId` | `string` | — | 这个标签管着的那块内容面板的 id，写进 `aria-controls`。只有外层是 `role="tablist"` 时才用得上。 |
| `disabled` | `boolean` | `false` | 禁用这个标签。键盘导航会自动跳过。 |
| `href` | `string` | — | 要跳去的地址。不是标签页模式时，标签渲染成链接；外层是 `role="tablist"` 时这个属性不起作用。 |
| `as` | `NavLinkComponent` | `'a'` | 链接换成别的根组件时用，例如路由链接。只有写了 `href` 且外层不是 tablist 才用到。 |
| `isLabelHidden` | `boolean` | `false` | 视觉上藏起文字，只留图标和末尾内容。这时文字改用 `label` 当读屏名。 |

## 插槽

- `default`：标签文字。不写就用 `label` 属性。
- `icon`：没选中时显示的图标。
- `selectedIcon`：选中时显示的图标，不写就用 `icon`。
- `endContent`：文字后面的内容，例如徽标里的数字或状态点。