N Nexus UI Component Library
v3.0
陈
由页面以纯 HTML 打开并书写内容。 ========================================================================= -->
通用组件 / 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 会切换图标填充色并弹出对应提示,适合收藏/点赞这类可逆的轻操作。

危险操作的三种强度
移除出收藏夹(可恢复)
停用该账号(可再启用)
彻底删除(不可恢复)

危险强度三级递减:文字链接 → 描边危险 → 实心危险,视觉重量直接对应后果严重程度。