通用组件 / 10
按钮形态 · FAB
同一个动作,在不同容器里要有不同的形态:窄屏底部用全宽按钮,移动端右下角用圆形 FAB,工具栏用按钮组与分段控件,异步提交用带 loading 的按钮。本页把六类形态一次讲完。
尺寸阶梯
btn-sm 34 / 默认 44 / btn-lg 50 / btn-xl 56四档高度
同尺寸的次要按钮
字号随高度同步放大:13px → 14px → 15px → 16px,保证按钮的视觉密度始终一致。
全宽与对齐
移动端底部操作区
左右分散对齐
第 3 / 12 步
移动端一屏只放一个主操作,全宽按钮的下边距至少 10px,避免误触。
悬浮操作按钮 FAB
shadow-fab / rounded-full圆形主 FAB
陈
右下角是页面唯一的主操作
56 × 56 圆形 + shadow-fab 投影;只在移动端与看板类页面使用,桌面端会被右侧栏遮挡。
扩展式与堆叠 FAB
右侧竖排两个次操作 + 一个主操作
主操作用胶囊形并带文字,次操作降级为 44px 圆形,从下往上依次是"主 → 次 → 次"。
按钮组与分段控件
.btn-group / .segmented按钮组 · 同一动作的不同口径
相邻按钮共享一条边框,当前项用反色填充,视觉上是一个整体而不是四个按钮。
分段控件 · 轻量切换
排序
分段控件自带灰底圆角容器,选中项浮起并加浅投影;切换逻辑由 [data-seg] 接管。
支付方式 · 单选卡片组
用 .btn 的 ! 覆盖类改造为选项卡片:左侧标签、右侧说明,仍然是可聚焦的原生按钮。
加载态按钮
[data-load] / .lbl四风格加载态
按钮内的 .lbl 由脚本替换为 loading 旋转图标;主按钮上的 spinner 自动换成白色描边,深色模式下反向。
加载中的静态呈现与其它形态
加载条与骨架
整页级等待用 .loadbar,区域级等待用 .bar.thin,行内等待直接放 .spin。三种加载的粒度要匹配"用户等多久"。
常用操作按钮
copy / download / wish / like / voice / scan复制 · 下载 · 分享
npm i -D nexus-ui-cli npx nexus init --tokens ./tokens.json
代码块右上角的复制按钮由 .codeblock 内的 .cp 自动接管,不需要写 data 属性。
收藏 · 点赞 · 语音 · 扫码
data-wish 会切换图标填充色并弹出对应提示,适合收藏/点赞这类可逆的轻操作。
危险操作的三种强度
移除出收藏夹(可恢复)
停用该账号(可再启用)
彻底删除(不可恢复)
危险强度三级递减:文字链接 → 描边危险 → 实心危险,视觉重量直接对应后果严重程度。