为UI引擎前端页面添加物料组件

本文将帮助您全面认识UI引擎的物料组件分类，并掌握“从组件选择到画布部署”的完整操作流程，助力高效搭建前端页面。

物料组件概述

在低代码开发中，物料组件是构建前端页面的核心元素。UI引擎将物料组件划分为两大类别，以满足从“快速实现业务功能”到“精细定制界面”的多样化需求：

业务组件：基于工业数字模型驱动引擎-数据建模引擎（xDM Foundation，简称xDM-F）提供的XDM模型，或UI引擎内置数据源功能定制开发。此类组件封装了通用业务逻辑，能够根据数据模型快速生成表单、表格等业务功能界面，无需手动编写大量业务逻辑代码，大幅提升开发效率。
基础组件：提供标准化界面元素库，涵盖布局容器、表单控件、数据展示等类型。此类组件无预设业务逻辑，支持灵活组合与样式配置，帮助开发者快速实现页面的基本结构与交互功能。

此外，UI引擎还支持用户添加自定义组件库，以满足特定场景下的个性化需求。关于如何为UI引擎前端项目添加与管理自定义组件的具体操作请参见为UI引擎前端页面添加与管理自定义组件。

业务组件

业务组件当前以“XDM模型组件”为核心，可直接关联XDM模型或数据源，快速生成业务相关的页面元素。具体说明如下：

表1 业务组件说明
组件类型	组件名称	说明
XDM模型组件	数据源表单	基于选定的数据源数据，自动解析数据结构并快速生成表单，无需手动逐个配置表单字段，大幅降低表单构建成本。
	数据源表格	基于选定的数据源数据，自动解析数据字段并生成表格组件，直接展示数据源中的数据列表，支持基础的表格展示与数据渲染，无需手动定义列配置。
	模板树	关联指定的XDM模型后，自动构建树形展示结构。支持懒加载、层级展开与节点选择，适用于组织架构、分类目录等父子型数据可视化场景。
	模板表格	关联指定的XDM模型后，自动生成功能完整的数据表格。前端项目运行时，会自动调用该模型关联的API接口获取数据并填充至表格，无需手动编写接口调用、数据渲染代码，实现“模型关联即数据展示”。
	模板表单	关联指定的XDM模型后，根据模型定义的字段自动生成表单，支持可视化调整字段的显示顺序、表单布局（如单列/多列排布），适配不同场景下的表单展示与数据收集需求。
	搜索模板	关联指定的XDM模型后，一键生成具备“增、删、改、查”全功能的业务页面，无需手动搭建页面结构与编写业务逻辑，快速落地各类数据管理类业务模块。

基础组件

“基础组件”是构建页面的通用元素，细分为布局与容器、基础元素、导航类型、表单类型、表格类型、反馈、图表组件七大类，覆盖页面结构搭建、交互实现、数据可视化等核心场景。

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