AniBTUI
✦ 组件

全部组件

每个组件都是一份写进你项目里的源码,材质来自 @anibt/theme 的配方。

基础3

输入与表单14

Input@anibt/input

32 高的文本框:纸面加一圈细边,聚焦是粉色边和光晕,出错变红,只读和禁用是下沉的浅底。

Textarea@anibt/textarea

多行文本框,材质和状态与 Input 相同,随内容长高。

Label@anibt/label

字段标签:13/600 的 ink2,放在控件上方;控件禁用时标签变灰而不是变淡。

Field@anibt/field

AniBT 的表单版式:标签在上、标签旁的小签和右端的元信息、控件下的说明或错误、短字段两两成行、一组字段一张卡。导出名与 shadcn 的 field 相同。

Select@anibt/select

短列表的选择器:触发器是输入框的材质,列表浮在 A 的弹层上,选中的一行是粉字加粉色对勾。

Checkbox@anibt/checkbox

18px 的糖果勾选框:选中是糖果粉加一个弹出来的白色对勾,部分选中是一道横线。

Switch@anibt/switch

36×20 的糖果开关:关是下沉的轨道,开是糖果粉,16px 的白色旋钮弹簧般滑过去。

Radio Group@anibt/radio-group

18px 的糖果单选:选中的一项是糖果粉加白点,和勾选框同一种填充。

Segmented Control@anibt/segmented-control

下沉的轨道里并排几个选项,选中的一项是白色贴纸拇指、图标变粉;底下是单选组的语义。

Toggle Group@anibt/toggle-group

按下后保持的一组按钮:下沉轨道里的贴纸拇指,或一排 28 高的筛选签,多选时选中的签露出对勾。

Tabs@anibt/tabs

缝线上的 32 高页签;当前页签下贴一条倾斜的和纸胶带,全站唯一的「你在这里」记号。

Search Input@anibt/search-input

唯一的搜索框:左边放大镜,右边清除键,空着时可以显示快捷键,手机键盘出现「搜索」键。

Password Input@anibt/password-input

带显示 / 隐藏键的密码框,键一直有可读名称,并报告自己的状态。

Kbd@anibt/kbd

键帽:20 高的下沉小块,底下一道 1px 的边,圆体字。

展示13

Avatar@anibt/avatar

模切白边的头像贴纸:人是圆的,字幕组和机构是圆角方的;没有图时是粉色淡底上的圆体首字。

Entity Avatar@anibt/entity-avatar

一个东西的唯一图像——字幕组的 logo、用户的头像——和唯一的兜底规则:有图显示图,没图显示按文字类型取的首字。

Skeleton@anibt/skeleton

加载中的占位:比输入框深一档的底色、圆角 10、慢慢地呼吸,没有流光渐变。

Progress@anibt/progress

下沉的轨道和带光泽的填充:蓝色是进行中,糖果粉是你自己的目标,薄荷是已完成。

Pagination@anibt/pagination

圆体的 32 高分页格:指针下是粉色淡底,当前页加一圈粉边;手机上每格 44 的触控区。

Empty@anibt/empty

空状态:面板里的分组框,或者 A 的倾斜便签——你的图片从便签上沿探出头,两颗 ✦ 在旁边闪。

Tooltip@anibt/tooltip

深色提示气泡(夜樱里是浅色),带同色的小尾巴,给只有图标的按钮报名字。

Separator@anibt/separator

A 的分隔是一条虚线缝线:4px 线、4px 空,1px 粗;也可以是 1px 的实线。

Alert@anibt/alert

状态淡底上的提示:蓝色进行中、薄荷成功、琥珀注意、红色失败;也可以是表单里一行带点的提示。

Accordion@anibt/accordion

折叠的段落:缝线分开的行,或一张张分组卡;指针下标题变粉,展开的那节箭头翻转成粉色。

Breadcrumb@anibt/breadcrumb

13 号弱色的路径:链接指针下变粉,当前页是墨色 600,分隔是一个小箭头。

Table@anibt/table

真正的 table:36 高的弱色表头、至少 48 高的行,行与行之间是缝线;选中的行是粉色淡底,数字用圆体右对齐。

Page Header@anibt/page-header

一行的页头:倾斜的贴纸记号、20/800 的标题、圆体的数字、省略的说明,右边是这一页的工具组。

区块2

浮层13

Dialog@anibt/dialog

一条记录的弹窗:浮层纸面、48 高的缝线头、安静的关闭方块,头和脚固定、中间一块滚动。

Alert Dialog@anibt/alert-dialog

必须回答的问题:同一块浮层和缝线头,头里有 24px 的标记块,取消在左、操作在右。

Confirm Dialog@anibt/confirm-dialog

破坏性或不可撤销操作前的一次确认。返回 Promise 时弹窗保持打开并显示进行中,失败不关闭。

Dropdown Menu@anibt/dropdown-menu

浮层菜单:32 高的行,指针或键盘所在行是粉色淡底,分组之间是缝线,危险行是红色。

Popover@anibt/popover

贴在触发器旁边的小浮层:纸面、1px 外边、浮层阴影,标题 14/700,说明 12 号弱色。

Hover Card@anibt/hover-card

指针停在链接上时弹出的预览卡,比如字幕组或番剧的简介。只是预览,不是唯一入口。

Sheet@anibt/sheet

从屏幕边缘滑入的面板:筛选、导航、手机侧栏。缝线头、一块滚动的正文、永远够得着的脚。

Drawer@anibt/drawer

手机上的「一条记录」容器:从底边拖出来的浮层,带拖动条,脚部避开 Home 指示条。

Sonner@anibt/sonner

轻提示:浮层面板,左边 32px 的淡色类型方块,粗体标题加一行弱色说明,右端是安静的关闭键。

Command@anibt/command

可搜索的命令列表和 ⌘K 面板:44 高的缝线搜索行,32 高的行,选中是粉色淡底。

Searchable Select@anibt/searchable-select

长列表的单选组合框:看起来是一个 32 高的输入框,展开是可搜索的命令列表,选中的行带粉色勾。

Multi Select@anibt/multi-select

订阅选择器:已选的值是框里可移除的标签,展开是可搜索的勾选清单,勾选时不关闭。

Markdown Editor@anibt/markdown-editor

收 Markdown 的唯一编辑面:编写 / 分栏 / 预览,九个格式工具和快捷键,预览用 A 的正文样式,带字数。