components/overview
zenit Storybook · 5f9add5+wip 2026-09-30zenit Storybook · 5f9add5+wip 2026-09-30
组件Components
51 个公开组件与 13 个能力实验。每一段录像都来自真实 zenit Storybook 窗口的 Metal drawable,由 E2E harness 驱动;源码与 Props 表直接从仓库提取。51 public components and 13 capability labs. Every clip is the Metal drawable of a real zenit Storybook window driven by the E2E harness; source and props are extracted straight from the repo.
Buttonui.widgets.Button主操作、次操作、危险操作、链接式和纯图标按钮。Primary, secondary, destructive, link-style and icon-only buttons.
Checkboxui.widgets.Checkbox独立布尔选择,支持未选、已选和不确定态。An independent boolean with unchecked, checked and indeterminate states.
Switchui.widgets.Switch用于立即生效的开关型布尔设置。A toggle for settings that apply immediately.
Radioui.widgets.RadioGroup从互斥选项中选择唯一值。Pick exactly one value from mutually exclusive options.
Sliderui.widgets.Slider在连续或离散范围中选择数值。Choose a value on a continuous or stepped range.
Rateui.widgets.Rate星级或有限数量评分。Star or bounded-count ratings.
NumberStepperui.widgets.NumberStepper精确递增、递减数值,适合数量和参数。Precise increment and decrement for quantities and parameters.
Inputui.widgets.Input单行文本、邮件、密码和搜索输入。Single-line text, email, password and search input.
Textareaui.widgets.Textarea多行编辑,支持 helper、error 和禁用态。Multi-line editing with helper, error and disabled states.
Selectui.widgets.Select单选、多选、可清除与可搜索的选择器。Single, multiple, clearable and searchable pickers.
Form CompositionInput · Select · Button同一尺寸档的 Input、Select、Button 混排:筛选工具栏与业务表单。Input, Select and Button mixed at one size: a filter toolbar and a business form.
ComboBoxui.widgets.ComboBox可搜索、可过滤并回填值的组合输入。A searchable, filterable input that writes back its value.
TagsInputui.widgets.TagsInput用键盘连续录入多个 token。Enter many tokens from the keyboard.
FileUploadui.widgets.FileUpload文件选择与拖放入口。File picking and a drop target.
DatePickerui.widgets.DatePicker输入单个日期并使用日历选择。Enter a single date or pick it from a calendar.
DateRangePickerui.widgets.DateRangePicker选择 start / end 两端日期。Pick a start and an end date.
Formui.widgets.FormOf(T)类型化表单状态、字段元信息和验证时机。Typed form state, field metadata and validation timing.
Badgeui.widgets.Badge低强调状态、数量和语义色标签。Low-emphasis status, counts and semantic labels.
Tagui.widgets.Tag可关闭或只读的分类标签。Closable or read-only category labels.
Chipui.widgets.Chip紧凑选择、筛选条件或带图标 token。Compact choices, filters or icon tokens.
Cardui.widgets.Card把标题、正文和可交互表面组织成一个视觉单元。Groups a title, body and interactive surface into one unit.
Alertui.widgets.Alert页面内持久反馈。Persistent in-page feedback.
Progressui.widgets.Progress确定进度与不确定任务状态。Determinate and indeterminate progress.
Spinnerui.widgets.Spinner短时加载状态的紧凑动画。A compact animation for short waits.
Skeletonui.widgets.Skeleton内容尚未到达时的占位骨架。Placeholder structure while content loads.
Timelineui.widgets.Timeline按时间或状态展示纵向事件。Vertical events by time or status.
Breadcrumbui.widgets.Breadcrumb表达当前位置及祖先路径。Shows the current location and its ancestors.
Stepsui.widgets.Steps展示多阶段任务的已完成、当前和待处理状态。Done, current and pending states of a multi-stage task.
Treeui.widgets.Tree层级数据、文件树和可展开结构。Hierarchies, file trees and expandable structures.
Tableui.widgets.Table固定列定义与自定义 cell renderer 的基础表格。A basic table with fixed columns and custom cells.
DataTableui.widgets.DataTable带筛选、分页和列行为的数据表。A data table with filtering, paging and column behavior.
Calendarui.widgets.Calendar月视图日期浏览与选择。Month-view date browsing and selection.
Markdownui.widgets.Markdown把受支持的 Markdown 子集渲染为原生节点。Renders a supported Markdown subset as native nodes.ui.system_iconsprovider 无关的语义图标角色、尺寸与着色。Provider-neutral semantic icon roles, sizes and tints.
Tabsui.widgets.Tabs在同一上下文切换平级视图。Switch between sibling views in one context.
Accordionui.widgets.Accordion折叠和展开分段内容。Collapse and expand sections.
Menuui.widgets.Menu上下文动作列表与快捷键提示。Contextual actions with shortcut hints.
DropdownMenuui.widgets.DropdownMenu从按钮展开的一组命令。A set of commands opened from a button.
Notificationui.widgets.Notifier不打断当前任务的系统级通知:九种类型、进度、操作按钮、堆叠与八个停靠位置。Non-blocking notifications: nine kinds, progress, actions, stacking and eight docking positions.
Tooltipui.widgets.Tooltip为控件提供短小补充说明。Short supplementary hints for controls.
Popoverui.widgets.Popover承载比 Tooltip 更丰富的临时内容。Richer transient content than a tooltip.
Modalui.widgets.Modal阻塞式任务、确认与聚焦上下文。Blocking tasks, confirmations and focused context.
Sheetui.widgets.Sheet从窗口边缘进入的辅助任务面板。A side panel that slides in from the window edge.
GlassBoxui.widgets.GlassBox使用真实 backdrop blur 的玻璃表面。A glass surface with a real backdrop blur.
Dividerui.widgets.Divider水平、垂直和带标签的内容分隔。Horizontal, vertical and labeled separators.
Stackui.widgets.HStack / VStack常用水平、垂直排列语义。Common horizontal and vertical arrangement.
Layout / Box Modelui.box盒模型、百分比、绝对定位、Flex / Grid 与裁剪的覆盖矩阵。A coverage matrix for the box model, percentages, absolute positioning, Flex / Grid and clipping.
VirtualListui.widgets.VirtualList只挂载可见窗口的大量等高数据。Mounts only the visible window of large uniform lists.
VirtualList (Dynamic)ui.widgets.VirtualList行高不一的虚拟列表。A virtual list with variable row heights.
ScrollAreaui.widgets.mountScrollArea自绘滚动、滚动条与程序化定位。Custom-drawn scrolling, scrollbars and programmatic positioning.
Gridui.widgets.mountGrid二维行列数据和自定义 cell renderer。Two-dimensional rows and columns with custom cells.
GlassLabui.widgets.GlassBoxGlassBox 光学参数实验台:折射、边缘宽度与放大。A GlassBox optics bench: refraction, bezel width and magnification.
GlassIslandsui.widgets.GlassBox多个玻璃岛叠放在同一背景上。Several glass islands over one backdrop.
GlassMotionui.widgets.GlassBox玻璃的形变与随滚动浮动的工具条。Morphing glass and a toolbar that floats while scrolling.
GlassChromeui.widgets.GlassBox应用 chrome:玻璃标题栏与工具条随内容滚动。App chrome: glass title bar and toolbar over scrolling content.
CanvasEventsui.events画布级事件:滚动、缩放手势、拖拽与剪贴板图片往返。Canvas-level events: scroll, magnify, drag and a clipboard PNG round-trip.
Dragui.interaction拖拽与水平 resize 手柄。Dragging and a horizontal resize handle.
Gesturesui.interaction单击、双击、三击与长按的手势仲裁。Gesture arbitration for single, double, triple click and long-press.
AnimControlsui.fx动画控制:yoyo、时间线、关键帧与弹簧。Animation control: yoyo, timelines, keyframes and springs.
VectorPathui.path矢量路径几何:描边、填充与命中。Vector path geometry: stroke, fill and hit-testing.
BlendModesui.box混合模式与透明度合成。Blend modes and opacity compositing.
Emojiui.text彩色 emoji、ZWJ 序列与肤色修饰。Color emoji, ZWJ sequences and skin-tone modifiers.
RTLui.text阿拉伯文、希伯来文与拉丁文混排。Arabic, Hebrew and Latin mixed text.
WordNavui.widgets.Textarea跨文字系统的按词移动光标。Word-wise cursor movement across scripts.