组件

下面的组件都从 @pelagornis/page/components 引入。每个页面都有实时预览、示例源码、MDX 与 Markdoc 用法，以及变体、结构、状态和键盘操作。

布局 9

• Box带有令牌内边距、填充、圆角和边框的基础布局容器。
• Container带令牌内边距的居中页面列。
• Grid使用固定列数或自动适配最小宽度的 CSS 网格。
• Stack用间距令牌控制间隔的单向 flex 布局。
• Spacer在行或列中把相邻元素推开的弹性间隔。
• Divider分组之间的水平分隔线，可带内联标签。
• Text把语义文字令牌映射到元素的排版基础组件。
• Scroll Area带令牌样式滚动条的滚动容器。
• Resizable由可拖动手柄分隔的分栏面板。

操作 6

• Button触发保存、继续或打开面板等操作。
• Link会标出外部目标的行内超链接。
• Dropdown从触发器展开的操作列表。
• Menu带标签、快捷键、说明和子菜单的菜单。
• Context Menu在触发器上右键点击时打开的菜单。
• Command可搜索的命令列表。页眉搜索在 CommandDialog 中使用它。

表单 14

• Field组合标签、控件、提示和错误信息。
• Label表单控件的文字标签，可带必填标记。
• Input带错误和成功状态的单行输入框。
• Textarea多行文本输入框。
• Search Field带搜索图标和清除按钮的查询输入框。
• Input OTP分格输入的一次性验证码。
• Checkbox可带标签和说明的二元选择。
• Radio在共享同一 name 的分组中选择一项。
• Switch即时生效的开关设置，也以 Toggle 导出。
• Select从弹出列表中选择一个值。
• Segmented Control一排互斥的选项。
• Slider在一个范围内选取数值。
• Spin Button带增减按钮的数字输入框。
• Calendar用于选择日期或日期范围的月历。

导航 9

• Breadcrumb通往当前页面的链接路径。
• Navigation Menu可带下拉面板的顶层站点导航。
• Pagination在长列表的各页之间切换。
• Tabs在共用同一区域的面板之间切换。
• Sidebar带分组的垂直导航，文档外壳基于它构建。
• Stepper带标题和说明的编号步骤。
• Progress Stepper以紧凑形式显示多步骤流程的进度。
• Tree用于文件和嵌套导航的可展开层级。
• Footer包含品牌、链接分组和元信息的站点页脚，文档页脚使用它。

反馈 7

• Alert带图标、标题和操作的行内状态提示。
• Toast在代码中用 toast() 触发的简短通知。
• Progress显示任务完成程度的进度条。
• Spinner不确定进度的加载指示器。
• Skeleton内容加载时显示的占位形状。
• Badge小型状态标签或计数。
• Tooltip悬停或聚焦时显示的简短提示。

浮层 3

• Dialog用于专注任务或确认的模态窗口。
• Drawer从屏幕边缘滑出的面板。
• Popover锚定在触发器上的浮动面板。

数据展示 11

• Avatar代表某个人的图片、首字母或图标。
• Avatar Group堆叠或展开的头像组，可显示溢出数量。
• Card用页眉、内容和页脚承载一个主题的容器。
• Chip紧凑的标签或筛选项，可设为可移除，也以 Tag 导出。
• Bubble靠左或靠右对齐的聊天消息气泡。
• Table用于结构化数据的行和列。
• Chart由绘图基础组件组合而成的柱状图和折线图。
• Carousel带上一张、下一张按钮和指示器的幻灯片。
• Accordion可一次展开一个或多个的堆叠分区。
• Collapsible通过触发器显示或隐藏的单个分区。
• Icon通过 WebIcon 从图标字体渲染的 RefineUI 系统图标。