--- title: "组件库 — zenit Zig UI" description: "51 个公开组件与 13 个能力实验。每一段录像都来自真实 zenit Storybook 窗口的 Metal drawable，由 E2E harness 驱动；" url: https://zenit.z.express/zh/components language: zh-CN alternate_en: https://zenit.z.express/components.md alternate_es: https://zenit.z.express/es/components.md alternate_ja: https://zenit.z.express/ja/components.md alternate_ko: https://zenit.z.express/ko/components.md alternate_fr: https://zenit.z.express/fr/components.md alternate_de: https://zenit.z.express/de/components.md project: zenit v0.1.0-alpha (Zig 0.15.2, macOS) source: https://github.com/version-next/zenit --- # 组件 51 个公开组件与 13 个能力实验。每一段录像都来自真实 zenit Storybook 窗口的 Metal drawable，由 E2E harness 驱动；源码与 Props 表直接从仓库提取。 [Button`ui.widgets.Button`主操作、次操作、危险操作、链接式和纯图标按钮。](https://zenit.z.express/zh/components/button)[Checkbox`ui.widgets.Checkbox`独立布尔选择，支持未选、已选和不确定态。](https://zenit.z.express/zh/components/checkbox)[Switch`ui.widgets.Switch`用于立即生效的开关型布尔设置。](https://zenit.z.express/zh/components/switch)[Radio`ui.widgets.RadioGroup`从互斥选项中选择唯一值。](https://zenit.z.express/zh/components/radio)[Slider`ui.widgets.Slider`在连续或离散范围中选择数值。](https://zenit.z.express/zh/components/slider)[Rate`ui.widgets.Rate`星级或有限数量评分。](https://zenit.z.express/zh/components/rate)[NumberStepper`ui.widgets.NumberStepper`精确递增、递减数值，适合数量和参数。](https://zenit.z.express/zh/components/stepper)[Input`ui.widgets.Input`单行文本、邮件、密码和搜索输入。](https://zenit.z.express/zh/components/input)[Textarea`ui.widgets.Textarea`多行编辑，支持 helper、error 和禁用态。](https://zenit.z.express/zh/components/textarea)[Select`ui.widgets.Select`单选、多选、可清除与可搜索的选择器。](https://zenit.z.express/zh/components/select)[Form Composition`Input · Select · Button`同一尺寸档的 Input、Select、Button 混排：筛选工具栏与业务表单。](https://zenit.z.express/zh/components/formcompose)[ComboBox`ui.widgets.ComboBox`可搜索、可过滤并回填值的组合输入。](https://zenit.z.express/zh/components/combobox)[TagsInput`ui.widgets.TagsInput`用键盘连续录入多个 token。](https://zenit.z.express/zh/components/tags)[FileUpload`ui.widgets.FileUpload`文件选择与拖放入口。](https://zenit.z.express/zh/components/upload)[DatePicker`ui.widgets.DatePicker`输入单个日期并使用日历选择。](https://zenit.z.express/zh/components/datepicker)[DateRangePicker`ui.widgets.DateRangePicker`选择 start / end 两端日期。](https://zenit.z.express/zh/components/daterange)[Form`ui.widgets.FormOf(T)`类型化表单状态、字段元信息和验证时机。](https://zenit.z.express/zh/components/form)[Badge`ui.widgets.Badge`低强调状态、数量和语义色标签。](https://zenit.z.express/zh/components/badge)[Tag`ui.widgets.Tag`可关闭或只读的分类标签。](https://zenit.z.express/zh/components/tag)[Chip`ui.widgets.Chip`紧凑选择、筛选条件或带图标 token。](https://zenit.z.express/zh/components/chip)[Card`ui.widgets.Card`把标题、正文和可交互表面组织成一个视觉单元。](https://zenit.z.express/zh/components/card)[Alert`ui.widgets.Alert`页面内持久反馈。](https://zenit.z.express/zh/components/alert)[Progress`ui.widgets.Progress`确定进度与不确定任务状态。](https://zenit.z.express/zh/components/progress)[Spinner`ui.widgets.Spinner`短时加载状态的紧凑动画。](https://zenit.z.express/zh/components/spinner)[Skeleton`ui.widgets.Skeleton`内容尚未到达时的占位骨架。](https://zenit.z.express/zh/components/skeleton)[Timeline`ui.widgets.Timeline`按时间或状态展示纵向事件。](https://zenit.z.express/zh/components/timeline)[Breadcrumb`ui.widgets.Breadcrumb`表达当前位置及祖先路径。](https://zenit.z.express/zh/components/breadcrumb)[Steps`ui.widgets.Steps`展示多阶段任务的已完成、当前和待处理状态。](https://zenit.z.express/zh/components/steps)[Tree`ui.widgets.Tree`层级数据、文件树和可展开结构。](https://zenit.z.express/zh/components/tree)[Table`ui.widgets.Table`固定列定义与自定义 cell renderer 的基础表格。](https://zenit.z.express/zh/components/table)[DataTable`ui.widgets.DataTable`带筛选、分页和列行为的数据表。](https://zenit.z.express/zh/components/datatable)[Calendar`ui.widgets.Calendar`月视图日期浏览与选择。](https://zenit.z.express/zh/components/calendar)[Markdown`ui.widgets.Markdown`把受支持的 Markdown 子集渲染为原生节点。](https://zenit.z.express/zh/components/markdown)[Icons`ui.system_icons`provider 无关的语义图标角色、尺寸与着色。](https://zenit.z.express/zh/components/icons)[Tabs`ui.widgets.Tabs`在同一上下文切换平级视图。](https://zenit.z.express/zh/components/tabs)[Accordion`ui.widgets.Accordion`折叠和展开分段内容。](https://zenit.z.express/zh/components/accordion)[Menu`ui.widgets.Menu`上下文动作列表与快捷键提示。](https://zenit.z.express/zh/components/menu)[DropdownMenu`ui.widgets.DropdownMenu`从按钮展开的一组命令。](https://zenit.z.express/zh/components/dropdown)[Notification`ui.widgets.Notifier`不打断当前任务的系统级通知：九种类型、进度、操作按钮、堆叠与八个停靠位置。](https://zenit.z.express/zh/components/notification)[Tooltip`ui.widgets.Tooltip`为控件提供短小补充说明。](https://zenit.z.express/zh/components/tooltip)[Popover`ui.widgets.Popover`承载比 Tooltip 更丰富的临时内容。](https://zenit.z.express/zh/components/popover)[Modal`ui.widgets.Modal`阻塞式任务、确认与聚焦上下文。](https://zenit.z.express/zh/components/modal)[Sheet`ui.widgets.Sheet`从窗口边缘进入的辅助任务面板。](https://zenit.z.express/zh/components/sheet)[GlassBox`ui.widgets.GlassBox`使用真实 backdrop blur 的玻璃表面。](https://zenit.z.express/zh/components/glassbox)[Divider`ui.widgets.Divider`水平、垂直和带标签的内容分隔。](https://zenit.z.express/zh/components/divider)[Stack`ui.widgets.HStack / VStack`常用水平、垂直排列语义。](https://zenit.z.express/zh/components/stack)[Layout / Box Model`ui.box`盒模型、百分比、绝对定位、Flex / Grid 与裁剪的覆盖矩阵。](https://zenit.z.express/zh/components/layoutbox)[VirtualList`ui.widgets.VirtualList`只挂载可见窗口的大量等高数据。](https://zenit.z.express/zh/components/virtuallist)[VirtualList (Dynamic)`ui.widgets.VirtualList`行高不一的虚拟列表。](https://zenit.z.express/zh/components/virtuallistdynamic)[ScrollArea`ui.widgets.mountScrollArea`自绘滚动、滚动条与程序化定位。](https://zenit.z.express/zh/components/scrollarea)[Grid`ui.widgets.mountGrid`二维行列数据和自定义 cell renderer。](https://zenit.z.express/zh/components/grid)[GlassLab`ui.widgets.GlassBox`GlassBox 光学参数实验台：折射、边缘宽度与放大。](https://zenit.z.express/zh/components/glasslab)[GlassIslands`ui.widgets.GlassBox`多个玻璃岛叠放在同一背景上。](https://zenit.z.express/zh/components/glassislands)[GlassMotion`ui.widgets.GlassBox`玻璃的形变与随滚动浮动的工具条。](https://zenit.z.express/zh/components/glassmotion)[GlassChrome`ui.widgets.GlassBox`应用 chrome：玻璃标题栏与工具条随内容滚动。](https://zenit.z.express/zh/components/glasschrome)[CanvasEvents`ui.events`画布级事件：滚动、缩放手势、拖拽与剪贴板图片往返。](https://zenit.z.express/zh/components/canvasevents)[Drag`ui.interaction`拖拽与水平 resize 手柄。](https://zenit.z.express/zh/components/drag)[Gestures`ui.interaction`单击、双击、三击与长按的手势仲裁。](https://zenit.z.express/zh/components/multiclick)[AnimControls`ui.fx`动画控制：yoyo、时间线、关键帧与弹簧。](https://zenit.z.express/zh/components/animctl)[VectorPath`ui.path`矢量路径几何：描边、填充与命中。](https://zenit.z.express/zh/components/vectorpath)[BlendModes`ui.box`混合模式与透明度合成。](https://zenit.z.express/zh/components/blend)[Emoji`ui.text`彩色 emoji、ZWJ 序列与肤色修饰。](https://zenit.z.express/zh/components/emoji)[RTL`ui.text`阿拉伯文、希伯来文与拉丁文混排。](https://zenit.z.express/zh/components/rtl)[WordNav`ui.widgets.Textarea`跨文字系统的按词移动光标。](https://zenit.z.express/zh/components/wordnav)