#按钮组
标记为已读
归档
稍后提醒
添加到日历
添加到列表
删除
安装Terminal
npm install @a3s-lab/ui@0.2.0<div role="group" aria-label="消息操作" class="button-group">
<button type="button" class="btn" data-variant="outline">归档</button>
<button type="button" class="btn" data-variant="outline">举报</button>
</div>import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";#用途
引入 CSS
导入 Tailwind 和一个完整的 A3S UI 样式包。
@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";或者只导入基础 CSS、所需组件 CSS 和一个样式包。
@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/button-group.css";
@import "@a3s-lab/ui/components/button.css";
@import "@a3s-lab/ui/styles/a3s.css";按钮组负责连接子控件的边界与交互状态。
使用 CDN 或打包工具导入？请参阅安装页。
添加按钮组 HTML
将相关控件包装在 button-group 中。
<div role="group" aria-label="消息操作" class="button-group">
<button type="button" class="btn" data-variant="outline">归档</button>
<button type="button" class="btn" data-variant="outline">举报</button>
</div>使用 data-orientation="vertical" 垂直堆叠项目。拆分操作等场景需要可见分隔线时，在项目之间添加 <hr role="separator" />。非交互文本片段可使用直接子元素 <span>、<label> 或 <output>；直接子元素 <div> 不附加样式，可用于自定义布局。
#示例
#方向
使用 data-orientation="vertical" 垂直堆叠按钮。
<div role="group" aria-label="媒体控制" class="button-group h-fit" data-orientation="vertical">
<button type="button" class="btn" data-variant="outline" data-size="icon" aria-label="放大"><svg class="lucide lucide-plus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14" /><path d="M12 5v14" /></svg></button>
<button type="button" class="btn" data-variant="outline" data-size="icon" aria-label="缩小"><svg class="lucide lucide-minus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14" /></svg></button>
</div>#尺寸
<div class="flex flex-col items-start gap-8">
<div role="group" class="button-group">
<button type="button" class="btn" data-variant="outline" data-size="sm">小号</button>
<button type="button" class="btn" data-variant="outline" data-size="sm">按钮</button>
<button type="button" class="btn" data-variant="outline" data-size="sm">组</button>
<button type="button" class="btn" data-variant="outline" data-size="icon-sm" aria-label="添加小号项目"><svg class="lucide lucide-plus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14" /><path d="M12 5v14" /></svg></button>
</div>
<div role="group" class="button-group">
<button type="button" class="btn" data-variant="outline">默认</button>
<button type="button" class="btn" data-variant="outline">按钮</button>
<button type="button" class="btn" data-variant="outline">组</button>
<button type="button" class="btn" data-variant="outline" data-size="icon" aria-label="添加项目"><svg class="lucide lucide-plus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14" /><path d="M12 5v14" /></svg></button>
</div>
<div role="group" class="button-group">
<button type="button" class="btn" data-variant="outline" data-size="lg">大号</button>
<button type="button" class="btn" data-variant="outline" data-size="lg">按钮</button>
<button type="button" class="btn" data-variant="outline" data-size="lg">组</button>
<button type="button" class="btn" data-variant="outline" data-size="icon-lg" aria-label="添加大号项目"><svg class="lucide lucide-plus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14" /><path d="M12 5v14" /></svg></button>
</div>
</div>#嵌套
嵌套 button-group 组件以保持每个组内的控件连接，同时增加组之间的间距。
<div role="group" aria-label="分页控制" class="button-group">
<div role="group" class="button-group">
<button type="button" class="btn" data-variant="outline" data-size="sm">1</button>
<button type="button" class="btn" data-variant="outline" data-size="sm">2</button>
<button type="button" class="btn" data-variant="outline" data-size="sm">3</button>
<button type="button" class="btn" data-variant="outline" data-size="sm">4</button>
<button type="button" class="btn" data-variant="outline" data-size="sm">5</button>
</div>
<div role="group" class="button-group">
<button type="button" class="btn" data-variant="outline" data-size="icon-sm" aria-label="上一页"><svg class="lucide lucide-arrow-left" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg></button>
<button type="button" class="btn" data-variant="outline" data-size="icon-sm" aria-label="下一页"><svg class="lucide lucide-arrow-right" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg></button>
</div>
</div>#分隔符
使用 <hr role="separator" /> 在按钮之间添加可见分隔线。
<div role="group" class="button-group">
<button type="button" class="btn" data-variant="secondary" data-size="sm">复制</button>
<hr role="separator" />
<button type="button" class="btn" data-variant="secondary" data-size="sm">粘贴</button>
</div>#拆分按钮
使用分隔符创建带主操作和附加操作的拆分按钮。
<div role="group" class="button-group">
<button type="button" class="btn" data-variant="secondary">操作</button>
<hr role="separator" />
<button type="button" class="btn" data-variant="secondary" data-size="icon" aria-label="添加"><svg class="lucide lucide-plus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14" /><path d="M12 5v14" /></svg></button>
</div>#输入
<div role="group" aria-label="搜索" class="button-group">
<input type="text" class="input" placeholder="搜索…" aria-label="搜索消息" />
<button type="button" class="btn" data-variant="outline" aria-label="搜索"><svg class="lucide lucide-search" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34" /><circle cx="11" cy="11" r="8" /></svg></button>
</div>#输入组
<div role="group" class="button-group">
<div role="group" class="button-group">
<button type="button" class="btn" data-variant="outline" data-size="icon" aria-label="添加附件"><svg class="lucide lucide-plus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14" /><path d="M12 5v14" /></svg></button>
</div>
<div role="group" class="button-group">
<div class="input-group">
<input type="text" placeholder="输入消息…" aria-label="消息" />
<div role="group" data-align="inline-end">
<button type="button" class="btn" data-variant="ghost" data-size="icon-xs" aria-label="语音模式" aria-pressed="false"><svg class="lucide lucide-audio-lines" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10v3" /><path d="M6 6v11" /><path d="M10 3v18" /><path d="M14 8v7" /><path d="M18 5v13" /><path d="M22 10v3" /></svg></button>
</div>
</div>
</div>
</div>#下拉菜单
将对话静音
标记为已读
举报对话
屏蔽用户
分享对话
复制对话
删除对话
<div role="group" class="button-group">
<button type="button" class="btn" data-variant="outline">关注</button>
<div id="dropdown-menu-609880" class="dropdown-menu">
<button type="button" id="dropdown-menu-609880-trigger" aria-label="更多关注选项" aria-haspopup="menu" aria-controls="dropdown-menu-609880-menu" aria-expanded="false" class="btn" data-variant="outline" data-size="icon"><svg class="lucide lucide-chevron-down" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg></button>
<div id="dropdown-menu-609880-popover" data-popover aria-hidden="true" data-align="end">
<div role="menu" id="dropdown-menu-609880-menu" aria-labelledby="dropdown-menu-609880-trigger">
<div role="menuitem"><svg class="lucide lucide-volume-off" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 9a5 5 0 0 1 .95 2.293" /><path d="M19.364 5.636a9 9 0 0 1 1.889 9.96" /><path d="m2 2 20 20" /><path d="m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11" /><path d="M9.828 4.172A.686.686 0 0 1 11 4.657v.686" /></svg>
将对话静音
</div>
<div role="menuitem"><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
标记为已读
</div>
<div role="menuitem"><svg class="lucide lucide-triangle-alert" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
举报对话
</div>
<div role="menuitem"><svg class="lucide lucide-user-round-x" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 21a8 8 0 0 1 11.873-7" /><circle cx="10" cy="8" r="5" /><path d="m17 17 5 5" /><path d="m22 17-5 5" /></svg>
屏蔽用户
</div>
<div role="menuitem"><svg class="lucide lucide-share" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v13" /><path d="m16 6-4-4-4 4" /><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" /></svg>
分享对话
</div>
<div role="menuitem"><svg class="lucide lucide-copy" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>
复制对话
</div>
<hr role="separator" />
<div role="menuitem" class="text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/20 focus:bg-destructive/10 dark:focus:bg-destructive/20 focus:text-destructive [&_svg]:!text-destructive"><svg class="lucide lucide-trash-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 11v6" /><path d="M14 11v6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /><path d="M3 6h18" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></svg>
删除对话
</div>
</div>
</div>
</div>
</div>#选择
$ 美元
€ 欧元
£ 英镑
<div class="flex items-stretch gap-2">
<div role="group" aria-label="货币金额" class="button-group">
<div id="select-797405" class="select">
<button type="button" class="[&_[data-name]]:hidden" id="select-797405-trigger" aria-haspopup="listbox" aria-expanded="false" aria-controls="select-797405-listbox">
<span class="truncate">$</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down text-muted-foreground opacity-50 shrink-0"><path d="m6 9 6 6 6-6" /></svg>
</button>
<div id="select-797405-popover" data-popover aria-hidden="true">
<div role="listbox" id="select-797405-listbox" aria-orientation="vertical" aria-labelledby="select-797405-trigger">
<div role="option" data-value="$" data-label="$" aria-selected="true">
$
<span class="text-muted-foreground">美元</span>
</div>
<div role="option" data-value="€" data-label="€">
€
<span class="text-muted-foreground">欧元</span>
</div>
<div role="option" data-value="£" data-label="£">
£
<span class="text-muted-foreground">英镑</span>
</div>
</div>
</div>
<input type="hidden" name="select-797405-value" value="$" />
</div>
<input type="text" class="input" placeholder="10.00" aria-label="金额" />
</div>
<button type="button" class="btn" data-variant="outline" data-size="icon" aria-label="提交金额"><svg class="lucide lucide-arrow-right" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg></button>
</div>#弹出框
使用 Copilot 开始新任务
用自然语言描述你的任务。
Copilot 会创建拉取请求以供审查。
<div role="group" class="button-group">
<button type="button" class="btn" data-variant="outline"><svg class="lucide lucide-bot" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8" /><rect width="16" height="12" x="4" y="8" rx="2" /><path d="M2 14h2" /><path d="M20 14h2" /><path d="M15 13v2" /><path d="M9 13v2" /></svg>
Copilot
</button>
<div id="popover-788465" class="popover">
<button id="popover-788465-trigger" type="button" aria-label="打开弹出框" aria-expanded="false" aria-controls="popover-788465-popover" class="btn" data-variant="outline" data-size="icon"><svg class="lucide lucide-chevron-down" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg></button>
<div id="popover-788465-popover" data-popover aria-hidden="true" class="w-72 text-sm" data-align="end">
<div>
<p class="font-medium">使用 Copilot 开始新任务</p>
<p class="text-muted-foreground">用自然语言描述你的任务。</p>
</div>
<textarea class="textarea min-h-16 w-full resize-none" placeholder="我需要……"></textarea>
<p class="text-muted-foreground text-xs">Copilot 会创建拉取请求以供审查。</p>
</div>
</div>
</div>#RTL
将 dir="rtl" 添加到组或祖先中。明确翻转方向图标。
<div dir="rtl">
<div role="group" aria-label="إجراءات الرسالة" class="button-group">
<div role="group" class="button-group">
<button type="button" class="btn" data-variant="outline" data-size="icon" aria-label="رجوع"><svg class="rtl:rotate-180 lucide lucide-arrow-left" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg></button>
</div>
<div role="group" class="button-group">
<button type="button" class="btn" data-variant="outline">أرشفة</button>
<button type="button" class="btn" data-variant="outline">تقرير</button>
</div>
<div role="group" class="button-group">
<button type="button" class="btn" data-variant="outline">تأجيل</button>
<button type="button" class="btn" data-variant="outline" data-size="icon" aria-label="المزيد من الخيارات"><svg class="lucide lucide-ellipsis" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle cx="5" cy="12" r="1" /></svg></button>
</div>
</div>
</div>