这是一张卡片
下拉面板可以放入任意正式组件，不只是菜单项。
默认
变体
尺寸
禁用
加载
图标按钮
带图标
按钮组
默认
变体
垂直 · 图标
垂直 · 标签
垂直 · 矩形按钮
标签 · 关闭钮
标签 · 主操作
水平 · 向左
花瓣 · 主操作
花瓣 · 纯展开
默认
横向
默认
平面分组
单选筛选
默认
输入类型与禁用
默认
禁用
默认
全选
默认状态
尺寸
默认
禁用选项
禁用控件
多选与最大标签数
基础名单
头像与标签
6 位数字
6 位字母数字
4 位任意字符
8 位大写字母数字
可编辑
只读
拖放上传
紧凑文件选择器
数字步进
禁用
状态切换
pnpm add @bloret-crew/blora-design尺寸
XS
SM
MD
LG
XL
语义变体
P
N
I
S
C
形状
圆
方
头像组
A
B
C
+2
角标
AB
3状态点
默认 主色 成功 警告
脉冲在线状态
AB
默认
9
99+
8
New
Neutral
Info
Ready
Warning
Danger
带图标
Info
Success
Warning
Error
和 Tag 怎么选
Badge 回答「现在怎样」：数量、红点、New、成功/警告。不能点掉。分类词、筛选、可关闭用 Tag。
比例
默认
项目概览
卡片内容可以组合文本和其他正式组件。
变体
Default
默认卡片样式
Hover
悬浮效果卡片
Flat
无阴影卡片
Inset
内嵌卡片
面板
面板标题
面板内容区域，比卡片更宽松的容器。
定位角标
3
待处理项目
卡片角标由正式定位契约管理。
手动切换
第一项 · 设计规范
第二项 · 组件契约
第三项 · 发布门禁
自动播放
第一项 · 设计规范
第二项 · 组件契约
第三项 · 发布门禁
默认
趋势语义
趋势向上
趋势向下
| 用户名 | rhedar |
|---|---|
| 邮箱 | rhedar@bloret.net |
| 角色 | 管理员 |
| 状态 | 活跃 |
变体与滤镜
点击预览
预览组
无外框列表
A
B
C
组合在 Card 中
悬浮条目
可悬浮条目
第二条
A
B
C
D
E
默认与排序
| Name | Role | Status |
|---|---|---|
| Alice | Admin | Active |
| Bob | Editor | Offline |
| Carol | Guest | Pending |
| Dave | Editor | Active |
行选择
| 成员 | 部门 | 事项 | 状态 | 评分 |
|---|---|---|---|---|
| 张三 | 技术部 | 前端框架搭建 | 已完成 | 5 |
| 李四 | 技术部 | 接口文档撰写 | 审核中 | 5 |
| 王五 | 技术部 | 数据库迁移 | 待办 | 4 |
列设置与拖拽排序
| Name | Role | Status | Dept |
|---|---|---|---|
| Alice | Admin | Active | Core |
| Bob | Editor | Offline | Docs |
| Carol | Guest | Pending | Ops |
纵向虚拟滚动
| Name | Role | Status |
|---|
横纵双向虚拟滚动
斑马纹
| 成员 | 状态 |
|---|---|
| Alice | Active |
| Bob | Offline |
| Carol | Pending |
默认
Default
语义变体
DefaultPrimaryNeutralInfoSuccessWarning
可移除
React设计系统
和 Badge 怎么选
Tag 回答「这是什么」：分类、主题、可关掉的词。数量、红点、New、成功/警告用 Badge。
浏览器外壳
Blora Design
令牌驱动的 Web UI 框架
代码终端
npm install @bloret-crew/blora-designproject ready应用窗口
深色模式 · 跟随系统
手机设备
默认
此操作不可撤销，是否继续？
尺寸
小尺寸对话框。
中尺寸对话框。
大尺寸对话框。
禁止点击遮罩关闭
点击遮罩不会关闭，请使用关闭按钮或 Esc。
右侧
左侧
顶部
底部
静态变体
浮动服务 API
语义变体
线性进度
环形进度
卡片骨架
头像骨架
向下滚动页面后，按钮固定显示在页面右下角。
内嵌面板
浮层打开
默认
带分隔线
面板对齐
卡片内容
辅助说明
一段普通文字和辅助说明
浮动
通栏
较少页数
固定窗口与双侧省略号
简易页码
纵向
横向
默认
胶囊
垂直
通栏
A
卡片
圆角矩形容器
默认（上）
下方
起始侧
结束侧
设计评审
队列预览 · 第 1 张
接口联调
待办卡片 · 第 2 张
当前卡片
相册 / 队列预览 · 第 3 张
上线检查
发布清单 · 第 4 张
默认（右上）
12左上
3右下
8左下
1内侧
AB
默认
设计系统，按契约交付
令牌驱动的页面开场区。
居中
居中开场
标题与说明水平居中。
浅底
浅底开场
使用表面色而不是画布色。
紧凑
紧凑开场
最小高度降到 16rem。
横向按钮
纵向
输入加按钮
默认
上方内容
下方内容
垂直
左
右
右
带字
或者
虚线
文字动效
文字轮换
倒计时
数字增长
图片对比
任意内容
草稿
标题和说明挤在一起，状态也不清楚。
草稿
已发布
层级拆开，用正式标签表达状态。
已发布
悬停画廊
水印
受保护的预览内容
快捷键提示
打开命令：Ctrl K
响应式侧栏
设计规范
左侧导航按组分块。窄屏（≤900px）下折叠为抽屉。
紧凑侧栏
紧凑模式
min-height: 20rem（默认 28rem）
吸附
锚点与滚动监听
评论卡片
De
## 妈妈
极简发帖通常是为了引发情感共鸣或作为开放话题。
长评论折叠
N
在一个活跃的论坛中，讨论会随着回复不断积累。长评论应当保持可读性，但不应该在页面中占据过多垂直空间。
因此 Thread 会在渲染后测量正文高度：只有超过阈值的评论才会自动折叠，短评论不会生成任何多余控件。
折叠后的底部使用透明渐隐提示内容仍有后续，展开按钮浮在渐隐边缘；展开和收起时正文高度会平滑过渡。
撰写区
预览内容由消费者或 Markdown add-on 渲染。
完整评论流
De
## 妈妈
极简发帖通常是为了引发情感共鸣或作为开放话题。
N
在一个活跃的论坛中，讨论会随着回复不断积累。长评论应当保持可读性，但不应该在时间线中占据过多垂直空间。
因此 Thread 会在渲染后测量正文高度：只有超过阈值的评论才会自动折叠，短评论不会生成任何多余控件。
折叠后的底部使用透明渐隐提示内容仍有后续，展开按钮浮在渐隐边缘；展开和收起时正文高度会平滑过渡。
预览内容由消费者或 Markdown add-on 渲染。