组件手册总览
组件手册用于查找控件用途、参数、事件、交互行为和性能注意事项。
如果只需要快速确认“有没有这个组件、公开 API 叫什么、对应文档在哪里”,先看 组件清单。所有可布局组件共有的尺寸、margin、alignment 和容器 padding 规则见组件通用布局属性。
组合业务页面时,可以先阅读 组件设计系统。组件手册说明单个组件如何使用,设计系统说明页面如何选择 token、表达状态并保持交互和视觉一致。
如何选择组件
先按业务结构选择大类,再进入具体组件文档:
| 需求 | 优先查看 | 说明 |
|---|---|---|
| 文本、按钮、分区、折叠面板 | 基础组件 | 页面骨架和轻量交互。 |
| 文本、数字、日期、开关 | 输入组件 | 表单中直接录入值的字段。 |
| 枚举、树、表格弹窗选择 | 选择器 | 值必须来自候选集时使用。 |
| 表格、树、列表、主数据区 | 数据组件 | 大数据、虚拟化、复制、滚动和编辑。 |
| 菜单、标签、工作区 | 导航和工作区 | 模块入口、tab、dock 工作区。 |
| 弹窗、抽屉、通知 | 浮层和反馈 | 跨当前布局层显示的临时 UI。 |
| 工具栏、按钮权限 | 命令组件 | 绑定 Command / Permission 体系。 |
| 图表、文档、大文本 | 可视化和文档 | 非表单类内容展示和编辑。 |
如果组件涉及页面级状态、权限、上下文或大数据性能,先看对应指南,再回到组件文档查参数:
基础状态能力
所有组件都继承 RenderObject.visible,可由业务直接控制是否出现在布局、绘制、hit test 和焦点顺序中。交互组件按语义提供 disabled,输入或选择控件按语义提供 readonly。
| 状态 | 使用场景 | 组件责任 |
|---|---|---|
visible |
业务权限、页面模式、条件字段决定组件是否出现。 | 折叠布局、跳过绘制和命中测试、退出焦点顺序。 |
disabled |
控件存在但当前不可操作。 | 阻断鼠标和键盘交互,清理 hover、pressed、popup、菜单、拖拽等临时状态。 |
readonly |
值可查看但不可修改。 | 保持可读展示,阻止编辑或选择变更,按组件语义处理焦点和复制。 |
业务层负责计算权限和流程状态;组件层负责提供统一 UI 状态。命令入口优先通过命令系统统一映射 visible/enabled,表单和页面局部状态可以直接设置组件属性。
分类
基础组件
- Text
- Border
- Button
- IconButton
- ProgressBar
- Badge / Chip / Divider
- Card / Section / PageHeader
- CollapsiblePanelGroup
- ReviewSidebar
输入组件
- TextField
- TextArea
- NumberInput
- DatePicker
- Checkbox / Switch / Radio
- SegmentedControl
- Slider
- ColorPicker
选择器
数据组件
- GridView
- TreeView
- TreeGrid
- Table
- ReportView / ReportDesigner
- ListView
- ItemsControl
- EntryGrid
- PropertyGrid
导航和工作区
- MenuBar
- NavigationMenu
- Breadcrumb
- Tabs
- Pagination
- StatusBar
- TabView
- TabbedWorkspace
- DockWorkspace
- DockWorkbench
浮层和反馈
命令组件
可视化和文档
- Charts
- Barcode / QRCode
- Printing Components
- ImagePreview
- MarkdownViewer
- PlainTextEditor
- CodeEditor
- ClinicalFlowSheet
组件选择与组合原则
- 先从组件清单确认公共入口,再组合业务页面。
- 页面只依赖
ds-ui包入口,不复制或引用组件内部实现。 - 统一视觉通过公开的 theme token 和状态配置完成。
- 大数据页面优先选择支持虚拟化的组件,并明确滚动边界。
下一步
- 查完整导出清单,阅读 Public API。
- 查布局组件,阅读 布局系统总览。
- 查复杂页面组合,阅读 示例总览。