全部组件
每个组件都是一份写进你项目里的源码,材质来自 @anibt/theme 的配方。
基础3
输入与表单14
32 高的文本框:纸面加一圈细边,聚焦是粉色边和光晕,出错变红,只读和禁用是下沉的浅底。
多行文本框,材质和状态与 Input 相同,随内容长高。
字段标签:13/600 的 ink2,放在控件上方;控件禁用时标签变灰而不是变淡。
AniBT 的表单版式:标签在上、标签旁的小签和右端的元信息、控件下的说明或错误、短字段两两成行、一组字段一张卡。导出名与 shadcn 的 field 相同。
短列表的选择器:触发器是输入框的材质,列表浮在 A 的弹层上,选中的一行是粉字加粉色对勾。
18px 的糖果勾选框:选中是糖果粉加一个弹出来的白色对勾,部分选中是一道横线。
36×20 的糖果开关:关是下沉的轨道,开是糖果粉,16px 的白色旋钮弹簧般滑过去。
18px 的糖果单选:选中的一项是糖果粉加白点,和勾选框同一种填充。
下沉的轨道里并排几个选项,选中的一项是白色贴纸拇指、图标变粉;底下是单选组的语义。
按下后保持的一组按钮:下沉轨道里的贴纸拇指,或一排 28 高的筛选签,多选时选中的签露出对勾。
缝线上的 32 高页签;当前页签下贴一条倾斜的和纸胶带,全站唯一的「你在这里」记号。
唯一的搜索框:左边放大镜,右边清除键,空着时可以显示快捷键,手机键盘出现「搜索」键。
带显示 / 隐藏键的密码框,键一直有可读名称,并报告自己的状态。
键帽:20 高的下沉小块,底下一道 1px 的边,圆体字。
展示13
模切白边的头像贴纸:人是圆的,字幕组和机构是圆角方的;没有图时是粉色淡底上的圆体首字。
一个东西的唯一图像——字幕组的 logo、用户的头像——和唯一的兜底规则:有图显示图,没图显示按文字类型取的首字。
加载中的占位:比输入框深一档的底色、圆角 10、慢慢地呼吸,没有流光渐变。
下沉的轨道和带光泽的填充:蓝色是进行中,糖果粉是你自己的目标,薄荷是已完成。
圆体的 32 高分页格:指针下是粉色淡底,当前页加一圈粉边;手机上每格 44 的触控区。
空状态:面板里的分组框,或者 A 的倾斜便签——你的图片从便签上沿探出头,两颗 ✦ 在旁边闪。
深色提示气泡(夜樱里是浅色),带同色的小尾巴,给只有图标的按钮报名字。
A 的分隔是一条虚线缝线:4px 线、4px 空,1px 粗;也可以是 1px 的实线。
状态淡底上的提示:蓝色进行中、薄荷成功、琥珀注意、红色失败;也可以是表单里一行带点的提示。
折叠的段落:缝线分开的行,或一张张分组卡;指针下标题变粉,展开的那节箭头翻转成粉色。
13 号弱色的路径:链接指针下变粉,当前页是墨色 600,分隔是一个小箭头。
真正的 table:36 高的弱色表头、至少 48 高的行,行与行之间是缝线;选中的行是粉色淡底,数字用圆体右对齐。
一行的页头:倾斜的贴纸记号、20/800 的标题、圆体的数字、省略的说明,右边是这一页的工具组。
区块2
浮层13
一条记录的弹窗:浮层纸面、48 高的缝线头、安静的关闭方块,头和脚固定、中间一块滚动。
必须回答的问题:同一块浮层和缝线头,头里有 24px 的标记块,取消在左、操作在右。
破坏性或不可撤销操作前的一次确认。返回 Promise 时弹窗保持打开并显示进行中,失败不关闭。
浮层菜单:32 高的行,指针或键盘所在行是粉色淡底,分组之间是缝线,危险行是红色。
贴在触发器旁边的小浮层:纸面、1px 外边、浮层阴影,标题 14/700,说明 12 号弱色。
指针停在链接上时弹出的预览卡,比如字幕组或番剧的简介。只是预览,不是唯一入口。
从屏幕边缘滑入的面板:筛选、导航、手机侧栏。缝线头、一块滚动的正文、永远够得着的脚。
手机上的「一条记录」容器:从底边拖出来的浮层,带拖动条,脚部避开 Home 指示条。
轻提示:浮层面板,左边 32px 的淡色类型方块,粗体标题加一行弱色说明,右端是安静的关闭键。
可搜索的命令列表和 ⌘K 面板:44 高的缝线搜索行,32 高的行,选中是粉色淡底。
长列表的单选组合框:看起来是一个 32 高的输入框,展开是可搜索的命令列表,选中的行带粉色勾。
订阅选择器:已选的值是框里可移除的标签,展开是可搜索的勾选清单,勾选时不关闭。
收 Markdown 的唯一编辑面:编写 / 分栏 / 预览,九个格式工具和快捷键,预览用 A 的正文样式,带字数。
