# 按钮组

纯样式组件：不需要 JS，写好标记即可。把几个相关按钮连成一组：共用边框，只有两端有圆角。常用来做视图切换或分段筛选；选中项用 is-active 或 aria-pressed="true"。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<div class="zh-btn-group" role="group" aria-label="视图">
  <button class="zh-btn" aria-pressed="true">列表</button>
  <button class="zh-btn" aria-pressed="false">卡片</button>
  <button class="zh-btn" aria-pressed="false">看板</button>
</div>
```

## 样式类

`zh-btn-group`、`zh-btn-group--vertical`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `zh-btn-group` | 容器（class） | 里面放多个 zh-btn | 横向连接的一组按钮 |
| `zh-btn-group--vertical` | .zh-btn-group |  | 竖向排列 |
| `is-active / aria-pressed="true"` | 组内的按钮 |  | 选中状态；切换时由你的代码更新 |

## 无障碍

- 外层加 role="group" 和 aria-label 说明这组按钮的用途
- 做开关式选择时用 aria-pressed，并在点击时更新它

## 常见问题

### 按钮组是什么？

把几个相关按钮连成一组：共用边框，只有两端有圆角。常用来做视图切换或分段筛选；选中项用 is-active 或 aria-pressed="true"。

### 怎么使用按钮组？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

### 按钮组支持键盘和读屏吗？

外层加 role="group" 和 aria-label 说明这组按钮的用途；做开关式选择时用 aria-pressed，并在点击时更新它。

### 按钮组需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。