按钮组

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

纯样式 核心包

示例

在线试用 Markdown 版

代码

<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

无障碍

• 外层加 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。