# 为UI引擎前端页面添加物料组件
本文将帮助您全面认识UI引擎的物料组件分类，并掌握"从组件选择到画布部署"的完整操作流程，助力高效搭建前端页面。
#### 物料组件概述
在低代码开发中，物料组件是构建前端页面的核心元素。UI引擎将物料组件划分为两大类别，以满足从"快速实现业务功能"到"精细定制界面"的多样化需求：
- [业务组件]：基于工业数字模型驱动引擎-数据建模引擎（xDM Foundation，简称xDM-F）提供的XDM模型，或UI引擎内置数据源功能定制开发。此类组件封装了通用业务逻辑，能够根据数据模型快速生成表单、表格等业务功能界面，无需手动编写大量业务逻辑代码，大幅提升开发效率。
- [基础组件]：提供标准化界面元素库，涵盖布局容器、表单控件、数据展示等类型。此类组件无预设业务逻辑，支持灵活组合与样式配置，帮助开发者快速实现页面的基本结构与交互功能。
此外，UI引擎还支持用户添加自定义组件库，以满足特定场景下的个性化需求。关于如何为UI引擎前端项目添加与管理自定义组件的具体操作请参见[为UI引擎前端页面添加与管理自定义组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0072.html)。
 #### 业务组件
业务组件当前以"XDM模型组件"为核心，可直接关联xDM-F模型或数据源，快速生成业务相关的页面元素。具体说明如下：
表1业务组件说明 
| 组件类型    | 组件名称  | 说明                                                                                                                                                              |
|:---|:---|:---|
| XDM模型组件 | 数据源表单 | 基于数据源自动生成表单。 基于选定的数据源数据，自动解析数据结构并快速生成表单，无需手动逐个配置表单字段，大幅降低表单构建成本。                                                 |
| XDM模型组件 | 数据源表格 | 基于数据源自动生成表格。 基于选定的数据源数据，自动解析数据字段并生成表格组件，直接展示数据源中的数据列表，支持基础的表格展示与数据渲染，无需手动定义列配置。                                 |
| XDM模型组件 | 模板树   | 基于xDM-F模型构建树形结构。 关联指定的xDM-F模型后，自动构建树形展示结构。支持懒加载、层级展开与节点选择，适用于组织架构、分类目录等父子型数据可视化场景。                               |
| XDM模型组件 | 模板表格  | 基于xDM-F模型生成数据表格。 关联指定的xDM-F模型后，自动生成功能完整的数据表格。前端项目运行时，会自动调用该模型关联的API接口获取数据并填充至表格，无需手动编写接口调用、数据渲染代码，实现"模型关联即数据展示"。 |
| XDM模型组件 | 模板表单  | 基于xDM-F模型生成业务表单。 关联指定的xDM-F模型后，根据模型定义的字段自动生成表单，支持可视化调整字段的显示顺序、表单布局（如单列/多列排布），适配不同场景下的表单展示与数据收集需求。                |
| XDM模型组件 | 搜索模板  | 基于xDM-F模型生成CRUD页面。 关联指定的xDM-F模型后，一键生成具备"增、删、改、查"全功能的业务页面，无需手动搭建页面结构与编写业务逻辑，快速落地各类数据管理类业务模块。                        |
| XDM模型组件 | 树形模板  | 基于xDM-F模型构建"树+表单"联动体系。 关联指定的xDM-F模型后，自动构建"树形数据展示+数据操作"联动体系。支持节点显示配置、表单布局调整与数据检索，适用于树形结构数据的可视化展示与高效管理。               |
   
 #### 基础组件
"基础组件"是构建页面的通用元素，细分为布局与容器、基础元素、导航类型、表单类型、表格类型、反馈、图表组件七大类，覆盖页面结构搭建、交互实现、数据可视化等核心场景。
表2基础组件说明 
| 组件类型  | 组件名称  | 说明                                                                                                           |
|:---|:---|:---|
| 布局与容器 | 盒子容器  | 创建基础块级容器元素，作为页面布局的"基础单元"。主要用于包裹各类组件、划分页面功能区域（如头部、内容区、侧边栏），支持自定义宽高、边距、背景色等样式，适配灵活的布局组合需求。                     |
| 布局与容器 | 栅格布局  | 提供12列/24列标准化栅格系统，通过拖拽列元素快速搭建规整布局。支持灵活拆分列宽（如两栏均分、三栏1:2:1比例），无需手动计算尺寸，即可实现响应式、对齐一致的页面结构（如列表页、表单页的多列布局）。        |
| 布局与容器 | 分隔面板  | 将单一页面区域分割为两个独立子区域，内置可拖拽分割线，支持实时调整两个区域的宽度（左右分栏）或高度（上下分栏）。适用于需要动态调整内容区域比重的场景，如"左侧筛选区+右侧数据表格"、"上方预览区+下方编辑区"等。   |
| 基础元素  | 文本    | 插入纯文本内容，支持自定义字体类型、字号、颜色、对齐方式等样式，无交互能力，适用于页面说明文字、标签提示、辅助信息展示等静态内容呈现场景。                                        |
| 基础元素  | 图标    | 提供基于TinyVue的标准化图标集合（含操作类、状态类、功能类等常用类型），支持自定义尺寸与颜色，适配不同界面风格。                                                  |
| 基础元素  | 图片    | 嵌入图片资源，支持通过URL链接配置图片源，可自定义宽高、填充模式、加载失败提示图，适用于Logo、产品图、封面图等视觉元素展示，支持基础图片预览。                                   |
| 基础元素  | 链接    | 创建可单击的文字超链接，支持内外部页面跳转，可自定义文字样式与交互效果，为用户提供清晰的导航指引。                                                            |
| 基础元素  | 分隔线   | 提供水平分隔线，支持自定义线宽、颜色、间距，用于划分页面不同功能模块边界，增强界面层次感与布局清晰度。                                                          |
| 基础元素  | 标题    | 支持创建h1至h6六级标准标题，可用于构建页面信息层级，并支持样式自定义以符合整体视觉规范。                                                               |
| 基础元素  | 视频    | 用于在页面中嵌入并播放视频内容，支持主流视频格式与基础播放控制，可适配不同场景的展示需求。                                                                |
| 基础元素  | 按钮    | 提供多种类型和样式的操作按钮，支持文本、图标、尺寸、颜色及交互状态的灵活配置，适用于触发各类用户操作。                                                          |
| 导航类型  | 时间线   | 以时间轴形式清晰展示事件流或流程节点，支持纵向与横向布局，常用于任务进度、操作记录或发展历程等可视化场景。                                                        |
| 导航类型  | 标签页   | 通过选项卡在不同内容面板间切换，有效组织并分隔相关功能模块，支持多种布局样式与交互模式，优化界面空间利用率。                                                       |
| 导航类型  | 步骤条   | 引导用户按预设流程逐步完成任务的导航组件，直观展示当前进度与后续步骤，支持垂直与水平布局，适用于多步骤表单、配置向导等流程化场景。                                            |
| 表单类型  | 表单    | 由按钮、输入框、选择器、单选框、多选框等控件组成，用于实现数据的收集、校验与提交，支持复杂表单逻辑配置。                                                         |
| 表单类型  | 下拉框   | 即Select选择器，单击后弹出下拉列表展示预设选项，支持单选/多选、搜索过滤、默认值配置，简化用户在大量选项中的选择操作。                                               |
| 表单类型  | 开关    | 用于在两种对立状态（如开启/关闭、是/否）之间切换，提供直观的视觉反馈，适用于设置项的状态控制。                                                             |
| 表单类型  | 复选框   | 允许用户从一组选项中选择零个或多个选项，支持独立选择与状态回显，适用于多选场景。                                                                     |
| 表单类型  | 复选框组  | 将多个复选框组织为一个逻辑组，便于统一管理与验证，常用于需要批量选择的配置场景。                                                                     |
| 表单类型  | 单选框组  | 用于配置不同场景的选项，在一组备选项中进行单选。                                                                                     |
| 表单类型  | 日期选择  | 提供可视化日历界面，支持选择单个日期或日期范围，并兼容多种日期格式，适用于日期相关的数据录入。                                                              |
| 表单类型  | 时间选择器 | 通过下拉列表或时钟界面选择具体时间，支持时分（HH:mm）格式，适用于需要精确时间的场景。                                                                |
| 表单类型  | 数字输入框 | 用于输入数字值，支持设置最小/最大值、步进单位，并允许通过键盘或界面按钮增减数值，适用于数量、金额等数值录入。                                                      |
| 表单类型  | 搜索框   | 提供输入关键词执行搜索的专用输入框，常配有搜索图标与清空按钮，支持实时搜索与结果展示，适用于数据筛选与查询场景。                                                     |
| 表单类型  | 弹出编辑  | 只读型选择组件，不支持手动输入数据，单击后弹出面板展示树形组件或表格组件，用户需从面板中选择数据完成赋值。                                                        |
| 表单类型  | 文件上传  | 允许用户选择本地文件并上传至服务器，支持单文件、多文件、拖拽上传及格式限制，是文件管理功能的基础组件。                                                          |
| 表单类型  | 输入框   | 基础的文本输入组件，支持单行、多行文本录入，可设置占位提示、最大长度等属性，适用于通用文本输入场景。                                                           |
| 表单类型  | 富文本   | 提供可视化的富文本编辑能力，支持文本加粗、换行、字体颜色调整、插入图片/链接等操作，生成带格式的文本内容，适用于内容创作与编辑场景。                                           |
| 表格类型  | 表格    | 功能强大的结构化数据展示组件，支持以行和列的结构化形式展示数据列表，适用于需要动态管理和交互的数据展示场景。                                                       |
| 表格类型  | 分页    | 用于将大批量数据按指定条数拆分展示，支持配置每页数据量、快速跳转页码。通常与表格组件配合使用，确保大规模数据的清晰呈现和便捷浏览。                                            |
| 反馈    | 折叠面板  | 支持在内容区指定动态页面或自定义HTML，适用于需要隐藏和展示复杂内容的场景。提供展开与收起操作，优化页面空间利用率。                                                  |
| 反馈    | 树     | 用于展示具有父子层级关系的数据，支持节点选择与懒加载，提升用户体验和性能表现。                                                                      |
| 反馈    | 警告    | 即Alert组件，以非浮动层的静态形式呈现，始终显示在页面中，不会自动消失。用户可通过单击关闭按钮手动关闭警告，适用于重要信息的提示场景。                                        |
| 反馈    | 标签    | 用于标记事物的属性和维度，支持自定义样式和内容，适用于分类、标注等场景。                                                                         |
| 反馈    | 标签组   | 即TagGroup组件，可将多个标签管理为一组，便于批量展示和操作，适用于多属性标记或分组管理的场景。                                                          |
| 反馈    | 对话框   | 模态对话框以浮层形式显示，引导用户完成特定操作或确认信息，支持多种配置选项（如标题、内容、按钮等），确保交互流程清晰明确。                                                |
| 反馈    | 抽屉    | 侧边弹出式内容容器，可从页面左侧或右侧滑出，适用于展示辅助功能、配置选项、详细信息等次要或临时性内容，可随时收起以保持页面主区域整洁。                                          |
| 反馈    | 气泡卡片  | 当用户单击或悬停在某个元素上时，会弹出一个气泡式的卡片浮层。适用于需要对某个元素提供额外解释性描述或相关操作的场景。通过将这些内容收纳到气泡卡片中，并根据用户的操作行为动态展示，可以有效提升界面的信息密度和用户体验。 |
| 图表组件  | 条形图   | 以横向条形为载体展示数据，清晰对比多组数据的数值大小，适用于类目名称较长、数据差异明显的对比场景。                                                            |
| 图表组件  | 仪表盘   | 采用仪表盘式可视化设计，直观展示关键指标的完成度或状态区间，常配合指针、刻度及颜色分区呈现数据阈值与进度。                                                        |
| 图表组件  | 柱状图   | 以纵向立柱为载体展示数据，突出不同类目数据的量级差异，适用于趋势分析、数据分布比较及周期性数据呈现。                                                           |
| 图表组件  | 折线图   | 以线条走势呈现数据变化趋势，清晰反映数据随时间或其他维度的波动规律，适用于展示数据趋势。                                                                 |
| 图表组件  | 饼图    | 以圆形分割的扇形面积占比展示数据，直观呈现各部分占总体的比例关系，适用于分类数据占比分析。                                                                |
| 图表组件  | 进度图   | 以线性进度条形式展示任务或指标的完成进度，支持动态加载效果与百分比显示，适用于流程跟踪与状态监控。                                                            |
| 图表组件  | 环形图   | 饼图的衍生形态，以空心圆环展示数据占比，相比饼图更突出中心区域，同时清晰呈现各分类数据的占比关系，视觉效果更轻量化。                                                   |
   
#### 为前端页面添加组件
1. 在页面设计器的左侧插件功能区，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002498464024.png)，展开"物料"面板。
   
   该面板默认分为"业务组件"和"基础组件"两个标签页，可按需切换查看对应组件。
   图1物料面板   
   ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002498626620.png)
   
   
2. 在"物料"面板中，找到所需的目标组件，按住鼠标左键将其拖拽至中心画布区，松开鼠标即可完成组件的添加操作。