跳到正文
小小东 UI
搜索组件、模式…
⌘K
直角
圆角
主色
标准
紧凑
纯平
质感
开始
首页
三种用法
设计原则
基础
颜色
圆角
字体与层级
间距与尺寸
动效
质感(平面 / 立体)
图标
组件 · 基础
文字层级
Text
交互工具
Interaction
组件 · 操作
按钮
Button
文字链接按钮
Link
按钮组
ButtonGroup
组件 · 表单
字段
Field
选择
Select
自绘选择
Picker
搜索框
Search
输入组
InputGroup
密钥输入
SecretInput
可复制的值
ClipboardText
正文里可复制的字
InlineCopy
开关
Switch
复选
Checkbox
单选
Radio
滑块
Range
标签输入
TagInput
可输入的下拉
Combobox
组件 · 导航
标签页
Tabs
分段控件
Segmented
面包屑
Breadcrumbs
分页
Pagination
侧栏导航
Rail
侧栏
Sidebar
顶栏
Topbar
工具条
Toolbar
页面头
PageHeader
组件 · 设置
设置组
SettingsGroup
外观设置组
Appearance
列表
List
符号格
Glyphs
组件 · 浮层
对话框
Dialog
底部任务栏
Dock
从底部升起的面板
Sheet
右侧详情面板
Panel
菜单
Menu
说明浮层
Popover
提示
Tooltip
轻提示
Toast
命令面板
CommandPalette
组件 · 反馈
徽标
Badge
可选标签
Chip
状态点
Dot
横幅
Banner
空状态
Empty
进度
Progress
组件 · 内容
表格
Table
折叠
Collapsible
代码
Code
头像
Avatar
卡片
Card
分层卡片
LayerCard
布局预设
Layout
文章目录
TableOfContents
小小东标志
Logo
阅读排版
Prose
组件 · 展示
统计卡
Stat
图表
Chart
模式
拖放区与拖入遮罩
图片查看器
拖拽排序
按天分组的记录
两次确认
登录
会员计划与购买
状态行
写入进度胶囊
庆祝
设置搜索
账号卡
字的滚动替换
模板
插件侧边栏
插件登录页
设置页
会员站详情面板
文章阅读页
资源列表页
删除确认
工具
命令行与同步
截图回归
给 AI 看
更新日志
组件 · 反馈
状态点
Dot
一个小圆点表示状态(运行中、出错)。
演示
原生 HTML
代码
<span class="xxd-dot" data-tone="success"></span>
属性与类名
属性 / 类名
说明
类名
xxd-dot
键盘与读屏
圆点只是装饰(aria-hidden 或旁边有文字);状态必须同时写成文字
不要只用颜色区分两种状态
规则
语义圆,永远是圆
同类组件
徽标
可选标签
横幅
空状态
进度