OneCode 通用组件开发配置指南
一、布局组件
1.1 xui.UI.Layout
核心属性：
columns: 布局列数配置dock: 停靠方向（left/right/top/bottom）width: 宽度设置（支持百分比和像素值）height: 高度设置（支持百分比和像素值）iniProp.sub: 子布局组配置
场景说明：用于构建应用程序的整体布局框架，支持多列划分和元素停靠，是页面结构的基础组件。
代码示例：
{
id: 'xui.UI.Layout',
key: 'layout',
caption: '布局容器',
iniProp: {
columns: 3,
dock: 'left',
width: '100%',
height: '100%',
sub: [
{
id: 'xui.UI.LayoutGroup',
iniProp: {
caption: '左侧导航区',
width: '200px',
height: '100%',
borderType: 'line'
}
},
{
id: 'xui.UI.LayoutGroup',
iniProp: {
caption: '主内容区',
width: 'auto',
height: '100%',
borderType: 'none'
}
},
{
id: 'xui.UI.LayoutGroup',
iniProp: {
caption: '右侧信息区',
width: '300px',
height: '100%',
borderType: 'line'
}
}
]
}
}
1.2 xui.UI.LayoutGroup
核心属性：
caption: 分组标题width: 宽度设置height: 高度设置borderType: 边框类型（none/line/shadow）itemMargin: 内边距
场景说明：作为Layout组件的直接子元素，用于划分布局区域，实现复杂的页面分区。
代码示例：
{
id: 'xui.UI.LayoutGroup',
iniProp: {
caption: '数据展示区',
width: '100%',
height: '500px',
borderType: 'shadow',
itemMargin: '10px',
sub: [
{
id: 'xui.UI.Table',
iniProp: {
width: '100%',
height: '100%',
columns: [/* 表格列配置 */]
}
}
]
}
}
1.3 xui.UI.TabsGroup
核心属性：
selMode: 选择模式（single/multi）height: 高度设置activeIndex: 默认激活标签索引tabPosition: 标签位置（top/bottom/left/right）iniProp.sub: 标签页配置
场景说明：用于创建多标签页界面，实现内容的分类展示和切换，节省页面空间。
代码示例：
{
id: 'xui.UI.TabsGroup',
iniProp: {
selMode: 'single',
height: '400px',
activeIndex: 0,
tabPosition: 'top',
sub: [
{
id: 'xui.UI.TabPage',
iniProp: {
caption: '基本信息',
value: 'baseInfo',
sub: [/* 基本信息表单组件 */]
}
},
{
id: 'xui.UI.TabPage',
iniProp: {
caption: '详细配置',
value: 'detailConfig',
sub: [/* 详细配置组件 */]
}
},
{
id: 'xui.UI.TabPage',
iniProp: {
caption: '历史记录',
value: 'history',
sub: [/* 历史记录表格 */]
}
}
]
}
}
1.4 xui.UI.TabPage
核心属性：
caption: 标签页标题value: 标签页值iconClass: 图标样式类disabled: 是否禁用iniProp.sub: 标签页内容组件
场景说明：作为TabsGroup的子组件，承载具体的标签页内容，可包含任意其他组件。
代码示例：
{
id: 'xui.UI.TabPage',
iniProp: {
caption: '用户管理',
value: 'userManage',
iconClass: 'icon-user',
disabled: false,
sub: [
{
id: 'xui.UI.Button',
iniProp: {
caption: '新增用户',
width: '100px',
onClick: 'addUser()'
}
},
{
id: 'xui.UI.Table',
iniProp: {
width: '100%',
height: '300px',
/* 表格配置 */
}
}
]
}
}
二、容器组件
2.1 xui.UI.absContainer
核心属性：
width: 宽度height: 高度panelBgClr: 面板背景色patterned: 是否启用背景图案iniProp.sub: 子组件配置
场景说明：绝对定位容器，用于需要精确定位子元素的场景，如弹窗、悬浮面板等。
代码示例：
{
id: 'xui.UI.absContainer',
iniProp: {
width: '800px',
height: '600px',
panelBgClr: '#ffffff',
patterned: false,
sub: [
{
id: 'xui.UI.Dialog',
iniProp: {
caption: '系统设置',
width: '500px',
height: '400px',
left: '150px',
top: '100px'
}
},
{
id: 'xui.UI.Panel',
iniProp: {
caption: '快捷操作',
width: '200px',
height: '150px',
left: '50px',
top: '50px'
}
}
]
}
}
2.2 xui.UI.Dialog
核心属性：
caption: 对话框标题width: 宽度height: 高度left: 左边距top: 上边距showEffects: 显示动画效果hideEffects: 隐藏动画效果minWidth: 最小宽度iniProp.sub: 对话框内容组件
场景说明：弹出式对话框，用于展示重要信息、获取用户输入或进行功能配置。
代码示例：
{
id: 'xui.UI.Dialog',
iniProp: {
caption: '确认操作',
width: '400px',
height: '200px',
left: '50%',
top: '50%',
showEffects: 'fadeIn',
hideEffects: 'fadeOut',
minWidth: '300px',
sub: [
{
id: 'xui.UI.Label',
iniProp: {
caption: '确定要删除这条记录吗？',
top: '50px',
left: '20px',
fontSize: '14px'
}
},
{
id: 'xui.UI.Button',
iniProp: {
caption: '确定',
top: '120px',
left: '100px',
width: '80px',
onClick: 'confirmDelete()'
}
},
{
id: 'xui.UI.Button',
iniProp: {
caption: '取消',
top: '120px',
left: '220px',
width: '80px',
onClick: 'cancelDelete()'
}
}
]
}
}
2.3 xui.UI.Panel
核心属性：
caption: 面板标题width: 宽度height: 高度borderType: 边框类型collapsible: 是否可折叠iniFold: 是否初始折叠iniProp.sub: 面板内容组件
场景说明：面板容器，用于组织相关组件，支持折叠功能，常用于复杂表单或控制面板。
代码示例：
{
id: 'xui.UI.Panel',
iniProp: {
caption: '查询条件',
width: '100%',
height: '150px',
borderType: 'line',
collapsible: true,
iniFold: false,
sub: [
{
id: 'xui.UI.Input',
iniProp: {
caption: '名称',
name: 'name',
left: '20px',
top: '20px',
width: '200px'
}
},
{
id: 'xui.UI.Select',
iniProp: {
caption: '状态',
name: 'status',
left: '250px',
top: '20px',
width: '150px',
items: [/* 状态选项 */]
}
},
{
id: 'xui.UI.Button',
iniProp: {
caption: '查询',
left: '420px',
top: '20px',
width: '80px'
}
}
]
}
}
2.4 xui.UI.Group
核心属性：
caption: 组标题width: 宽度height: 高度itemMargin: 内边距layoutType: 布局类型（horizontal/vertical）iniProp.sub: 组内组件
场景说明：用于对相关组件进行分组管理，提供基本的布局控制，使界面结构更清晰。
代码示例：
{
id: 'xui.UI.Group',
iniProp: {
caption: '用户信息',
width: '100%',
height: 'auto',
itemMargin: '10px',
layoutType: 'vertical',
sub: [
{
id: 'xui.UI.Input',
iniProp: {
caption: '姓名',
name: 'username',
width: '300px'
}
},
{
id: 'xui.UI.Input',
iniProp: {
caption: '邮箱',
name: 'email',
width: '300px'
}
},
{
id: 'xui.UI.Input',
iniProp: {
caption: '电话',
name: 'phone',
width: '300px'
}
}
]
}
}
2.5 xui.UI.Block
核心属性：
width: 宽度height: 高度bgColor: 背景颜色borderRadius: 边框圆角shadow: 是否显示阴影iniProp.sub: 块内组件
场景说明：基础块级容器，用于简单的内容包裹和样式设置，是构建复杂界面的基础元素。
代码示例：
{
id: 'xui.UI.Block',
iniProp: {
width: '300px',
height: '200px',
bgColor: '#f5f5f5',
borderRadius: '5px',
shadow: true,
sub: [
{
id: 'xui.UI.Image',
iniProp: {
src: 'user-avatar.png',
width: '80px',
height: '80px',
left: '110px',
top: '20px'
}
},
{
id: 'xui.UI.Label',
iniProp: {
caption: '用户名',
top: '120px',
left: '130px',
fontSize: '16px'
}
}
]
}
}
2.6 xui.UI.Div
核心属性：
width: 宽度height: 高度className: CSS类名style: 内联样式iniProp.sub: 子元素
场景说明：通用容器元素，类似于HTML的div标签，用于布局和样式控制，支持自定义CSS。
代码示例：
{
id: 'xui.UI.Div',
iniProp: {
width: '100%',
height: 'auto',
className: 'custom-div',
style: 'margin: 10px; padding: 15px;',
sub: [
{
id: 'xui.UI.Label',
iniProp: {
caption: '自定义内容区域',
fontSize: '14px'
}
},
/* 其他组件 */
]
}
}
2.7 xui.UI.PanelGroup
核心属性：
width: 宽度height: 高度layout: 布局方式（accordion/tabs/grid）activeKey: 当前激活的面板键iniProp.sub: 面板组件
场景说明：面板组容器，支持手风琴、标签页和网格等多种布局方式，用于组织多个面板组件。
代码示例：
{
id: 'xui.UI.PanelGroup',
iniProp: {
width: '100%',
height: '500px',
layout: 'accordion',
activeKey: 'panel1',
sub: [
{
id: 'xui.UI.Panel',
iniProp: {
key: 'panel1',
caption: '基本信息',
height: '200px',
sub: [/* 基本信息组件 */]
}
},
{
id: 'xui.UI.Panel',
iniProp: {
key: 'panel2',
caption: '详细信息',
height: '200px',
sub: [/* 详细信息组件 */]
}
},
{
id: 'xui.UI.Panel',
iniProp: {
key: 'panel3',
caption: '相关数据',
height: '200px',
sub: [/* 相关数据组件 */]
}
}
]
}
}
三、高级表单组件
3.1 xui.UI.advForm
核心属性：
width: 宽度height: 高度columns: 列数labelWidth: 标签宽度itemSpacing: 表单项间距iniProp.sub: 表单字段组件
场景说明：高级表单容器，支持多列布局、表单验证和数据绑定，用于创建复杂的表单界面。
代码示例：
{
id: 'xui.UI.advForm',
iniProp: {
width: '100%',
height: 'auto',
columns: 2,
labelWidth: '100px',
itemSpacing: '15px',
sub: [
{
id: 'xui.UI.Input',
iniProp: {
caption: '姓名',
name: 'name',
required: true,
placeholder: '请输入姓名'
}
},
{
id: 'xui.UI.Select',
iniProp: {
caption: '性别',
name: 'gender',
items: [
{ value: 'male', caption: '男' },
{ value: 'female', caption: '女' }
]
}
},
{
id: 'xui.UI.DatePicker',
iniProp: {
caption: '出生日期',
name: 'birthday',
format: 'yyyy-MM-dd'
}
},
{
id: 'xui.UI.Input',
iniProp: {
caption: '电话',
name: 'phone',
validator: 'phone'
}
}
]
}
}
3.2 xui.UI.ComboInput
核心属性：
caption: 标签name: 字段名width: 宽度dataSource: 数据源valueField: 值字段textField: 文本字段multiple: 是否支持多选filterable: 是否支持过滤
场景说明：组合输入框，结合了输入框和下拉选择的功能，支持远程搜索和多选，适用于复杂的选择场景。
代码示例：
{
id: 'xui.UI.ComboInput',
iniProp: {
caption: '部门',
name: 'department',
width: '300px',
dataSource: '/api/departments',
valueField: 'id',
textField: 'name',
multiple: false,
filterable: true,
placeholder: '请选择部门'
}
}
3.3 xui.UI.RichEditor
核心属性：
name: 字段名width: 宽度height: 高度toolbar: 工具栏配置uploadUrl: 图片上传URLmenubar: 是否显示菜单栏
场景说明：富文本编辑器，支持文本格式化、图片插入、表格编辑等功能，用于创建富媒体内容。
代码示例：
{
id: 'xui.UI.RichEditor',
iniProp: {
name: 'content',
width: '100%',
height: '400px',
toolbar: 'undo redo | bold italic underline | alignleft aligncenter alignright | image link',
uploadUrl: '/api/upload/image',
menubar: true,
placeholder: '请输入内容...'
}
}
四、基础表单组件
4.1 xui.UI.Input
核心属性：
caption: 标签name: 字段名width: 宽度type: 输入类型（text/password/number等）value: 默认值placeholder: 占位文本required: 是否必填disabled: 是否禁用readOnly: 是否只读
场景说明：基础输入框，用于接收用户的文本输入，支持多种输入类型和验证规则。
代码示例：
{
id: 'xui.UI.Input',
iniProp: {
caption: '用户名',
name: 'username',
width: '300px',
type: 'text',
value: '',
placeholder: '请输入用户名',
required: true,
disabled: false,
readOnly: false,
validator: {
type: 'regex',
pattern: '^[a-zA-Z0-9_]{4,16}$',
message: '用户名只能包含字母、数字和下划线，长度4-16位'
}
}
}
4.2 xui.UI.Select
核心属性：
caption: 标签name: 字段名width: 宽度items: 选项列表multiple: 是否支持多选size: 显示行数disabled: 是否禁用
场景说明：下拉选择框，用于从预设选项中选择一个或多个值，支持静态和动态数据源。
代码示例：
{
id: 'xui.UI.Select',
iniProp: {
caption: '角色',
name: 'role',
width: '200px',
items: [
{ value: 'admin', caption: '管理员' },
{ value: 'editor', caption: '编辑' },
{ value: 'viewer', caption: '查看者' }
],
multiple: false,
size: 1,
disabled: false,
placeholder: '请选择角色'
}
}
4.3 xui.UI.CheckBox
核心属性：
caption: 标签name: 字段名value: 值checked: 是否选中disabled: 是否禁用text: 显示文本
场景说明：复选框，用于选择一个或多个选项，通常用于非互斥的选择场景。
代码示例：
{
id: 'xui.UI.CheckBox',
iniProp: {
caption: '兴趣爱好',
name: 'hobby',
value: 'reading',
checked: false,
disabled: false,
text: '阅读'
}
}
4.4 xui.UI.Radio
核心属性：
caption: 标签name: 字段名value: 值checked: 是否选中disabled: 是否禁用text: 显示文本group: 单选组名称
场景说明：单选按钮，用于从互斥选项中选择一个值，同一组中的单选按钮只能选择一个。
代码示例：
{
id: 'xui.UI.Radio',
iniProp: {
caption: '性别',
name: 'gender',
value: 'male',
checked: true,
disabled: false,
text: '男',
group: 'genderGroup'
}
}
4.5 xui.UI.TextArea
核心属性：
caption: 标签name: 字段名width: 宽度height: 高度value: 默认值placeholder: 占位文本rows: 行数cols: 列数readonly: 是否只读disabled: 是否禁用
场景说明：多行文本输入框，用于接收较长的文本输入，如备注、描述等。
代码示例：
{
id: 'xui.UI.TextArea',
iniProp: {
caption: '备注',
name: 'remark',
width: '400px',
height: '100px',
value: '',
placeholder: '请输入备注信息',
rows: 4,
cols: 50,
readonly: false,
disabled: false,
maxLength: 500
}
}
4.6 xui.UI.Button
核心属性：
caption: 按钮文本width: 宽度height: 高度type: 按钮类型（primary/default/danger/warning等）iconClass: 图标样式类onClick: 点击事件处理函数disabled: 是否禁用loading: 是否显示加载状态
场景说明：按钮组件，用于触发操作，如提交表单、保存数据、打开弹窗等。
代码示例：
{
id: 'xui.UI.Button',
iniProp: {
caption: '保存',
width: '100px',
height: '36px',
type: 'primary',
iconClass: 'icon-save',
onClick: 'saveForm()',
disabled: false,
loading: false
}
}
五、菜单与导航组件
5.1 xui.UI.menu
核心属性：
width: 宽度height: 高度mode: 显示模式（horizontal/vertical）theme: 主题样式（light/dark）iniProp.sub: 菜单项配置
场景说明：菜单容器，用于创建应用程序的导航菜单，支持水平和垂直两种显示模式。
代码示例：
{
id: 'xui.UI.menu',
iniProp: {
width: '100%',
height: '40px',
mode: 'horizontal',
theme: 'light',
sub: [
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '首页',
iconClass: 'icon-home',
onClick: 'goHome()'
}
},
{
id: 'xui.UI.SubMenu',
iniProp: {
caption: '系统管理',
iconClass: 'icon-setting',
sub: [
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '用户管理',
onClick: 'goUserManage()'
}
},
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '角色管理',
onClick: 'goRoleManage()'
}
},
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '权限管理',
onClick: 'goPermissionManage()'
}
}
]
}
},
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '帮助中心',
iconClass: 'icon-help',
onClick: 'goHelp()'
}
}
]
}
}
5.2 xui.UI.MenuBar
核心属性：
barLocation: 菜单栏位置（top/bottom/left/right）iconFontSize: 图标字体大小height: 高度bgColor: 背景颜色iniProp.sub: 菜单项配置
场景说明：应用程序菜单栏，通常位于页面顶部，包含应用的主要功能入口。
代码示例：
{
id: 'xui.UI.MenuBar',
iniProp: {
barLocation: 'top',
iconFontSize: 16,
height: '48px',
bgColor: '#2d8cf0',
sub: [
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '文件',
sub: [
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '新建',
shortcut: 'Ctrl+N',
onClick: 'newFile()'
}
},
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '打开',
shortcut: 'Ctrl+O',
onClick: 'openFile()'
}
},
{
id: 'xui.UI.MenuSeparator'
},
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '保存',
shortcut: 'Ctrl+S',
onClick: 'saveFile()'
}
},
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '另存为',
shortcut: 'Ctrl+Shift+S',
onClick: 'saveAsFile()'
}
}
]
}
},
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '编辑',
sub: [
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '撤销',
shortcut: 'Ctrl+Z',
onClick: 'undo()'
}
},
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '重做',
shortcut: 'Ctrl+Y',
onClick: 'redo()'
}
},
{
id: 'xui.UI.MenuSeparator'
},
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '剪切',
shortcut: 'Ctrl+X',
onClick: 'cut()'
}
},
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '复制',
shortcut: 'Ctrl+C',
onClick: 'copy()'
}
},
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '粘贴',
shortcut: 'Ctrl+V',
onClick: 'paste()'
}
}
]
}
}
]
}
}
5.3 xui.UI.MenuItem
核心属性：
caption: 菜单项文本iconClass: 图标样式类onClick: 点击事件处理函数shortcut: 快捷键disabled: 是否禁用sub: 子菜单项（用于多级菜单）
场景说明：菜单项组件，作为Menu或SubMenu的子元素，代表一个具体的菜单项。
代码示例：
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '用户管理',
iconClass: 'icon-user',
onClick: 'goUserManage()',
shortcut: 'Ctrl+U',
disabled: false,
sub: [
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '用户列表',
onClick: 'showUserList()'
}
},
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '新增用户',
onClick: 'addUser()'
}
},
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '用户组管理',
onClick: 'manageUserGroup()'
}
}
]
}
}
5.4 xui.UI.SubMenu
核心属性：
caption: 子菜单标题iconClass: 图标样式类disabled: 是否禁用sub: 子菜单项
场景说明：子菜单组件，用于创建多级菜单结构，可包含多个MenuItem或SubMenu。
代码示例：
{
id: 'xui.UI.SubMenu',
iniProp: {
caption: '报表分析',
iconClass: 'icon-chart',
disabled: false,
sub: [
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '销售报表',
onClick: 'showSalesReport()'
}
},
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '库存报表',
onClick: 'showInventoryReport()'
}
},
{
id: 'xui.UI.SubMenu',
iniProp: {
caption: '财务报表',
sub: [
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '月度报表',
onClick: 'showMonthlyReport()'
}
},
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '季度报表',
onClick: 'showQuarterlyReport()'
}
},
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '年度报表',
onClick: 'showAnnualReport()'
}
}
]
}
}
]
}
}
5.5 xui.UI.MenuSeparator
核心属性：无
场景说明：菜单分隔线，用于在菜单中分隔不同组的菜单项，提高菜单的可读性。
代码示例：
{
id: 'xui.UI.MenuSeparator'
}
5.6 xui.UI.ToolBar
核心属性：
barSize: 工具栏大小（small/medium/large）dock: 停靠位置（top/bottom/left/right）bgColor: 背景颜色height: 高度iniProp.sub: 工具栏项配置
场景说明：工具栏组件，用于放置常用操作按钮，通常位于页面顶部或内容区域上方。
代码示例：
{
id: 'xui.UI.ToolBar',
iniProp: {
barSize: 'medium',
dock: 'top',
bgColor: '#f5f5f5',
height: '40px',
sub: [
{
id: 'xui.UI.ToolButton',
iniProp: {
caption: '新增',
iconClass: 'icon-add',
onClick: 'addItem()'
}
},
{
id: 'xui.UI.ToolButton',
iniProp: {
caption: '编辑',
iconClass: 'icon-edit',
onClick: 'editItem()',
disabled: true
}
},
{
id: 'xui.UI.ToolButton',
iniProp: {
caption: '删除',
iconClass: 'icon-delete',
onClick: 'deleteItem()',
disabled: true
}
},
{
id: 'xui.UI.ToolSeparator'
},
{
id: 'xui.UI.ToolButton',
iniProp: {
caption: '刷新',
iconClass: 'icon-refresh',
onClick: 'refreshData()'
}
},
{
id: 'xui.UI.ToolButton',
iniProp: {
caption: '导出',
iconClass: 'icon-export',
onClick: 'exportData()'
}
}
]
}
}
5.7 xui.UI.ToolButton
核心属性：
caption: 按钮文本iconClass: 图标样式类onClick: 点击事件处理函数disabled: 是否禁用loading: 是否显示加载状态size: 按钮大小（small/medium/large）
场景说明：工具栏按钮，作为ToolBar的子组件，用于触发具体的操作。
代码示例：
{
id: 'xui.UI.ToolButton',
iniProp: {
caption: '查询',
iconClass: 'icon-search',
onClick: 'queryData()',
disabled: false,
loading: false,
size: 'small'
}
}
5.8 xui.UI.ToolSeparator
核心属性：无
场景说明：工具栏分隔线，用于在工具栏中分隔不同组的工具按钮。
代码示例：
{
id: 'xui.UI.ToolSeparator'
}
5.9 xui.UI.StatusButtons
核心属性：
width: 宽度height: 高度align: 对齐方式（left/center/right）itemSpacing: 按钮间距iniProp.sub: 状态按钮配置
场景说明：状态按钮组，用于展示和切换不同的状态选项，如数据状态、流程状态等。
代码示例：
{
id: 'xui.UI.StatusButtons',
iniProp: {
width: '100%',
height: '40px',
align: 'left',
itemSpacing: '10px',
sub: [
{
id: 'xui.UI.Button',
iniProp: {
caption: '全部',
type: 'primary',
width: '80px',
onClick: 'filterStatus("all")'
}
},
{
id: 'xui.UI.Button',
iniProp: {
caption: '待处理',
type: 'default',
width: '80px',
onClick: 'filterStatus("pending")'
}
},
{
id: 'xui.UI.Button',
iniProp: {
caption: '处理中',
type: 'default',
width: '80px',
onClick: 'filterStatus("processing")'
}
},
{
id: 'xui.UI.Button',
iniProp: {
caption: '已完成',
type: 'default',
width: '80px',
onClick: 'filterStatus("completed")'
}
},
{
id: 'xui.UI.Button',
iniProp: {
caption: '已取消',
type: 'default',
width: '80px',
onClick: 'filterStatus("cancelled")'
}
}
]
}
}
5.10 xui.UI.PageBar
核心属性：
total: 总记录数pageSize: 每页记录数currentPage: 当前页码showTotal: 是否显示总记录数showJumper: 是否显示页码跳转onPageChange: 页码变化事件pageSizeOptions: 每页条数选项
场景说明：分页控件，用于分页展示大量数据，支持页码切换、每页条数调整等功能。
代码示例：
{
id: 'xui.UI.PageBar',
iniProp: {
total: 125,
pageSize: 10,
currentPage: 1,
showTotal: true,
showJumper: true,
onPageChange: 'handlePageChange(page, pageSize)',
pageSizeOptions: [10, 20, 50, 100]
}
}
5.11 xui.UI.PopMenu
核心属性：
trigger: 触发方式（click/hover）placement: 弹出位置（top/bottom/left/right）width: 宽度iniProp.sub: 菜单项配置
场景说明：弹出菜单，通常通过点击或悬停触发，用于展示上下文相关的操作选项。
代码示例：
{
id: 'xui.UI.PopMenu',
iniProp: {
trigger: 'click',
placement: 'bottom',
width: '150px',
sub: [
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '查看详情',
onClick: 'viewDetail()'
}
},
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '编辑',
onClick: 'editItem()'
}
},
{
id: 'xui.UI.MenuSeparator'
},
{
id: 'xui.UI.MenuItem',
iniProp: {
caption: '删除',
onClick: 'deleteItem()',
style: 'color: #ff4d4f'
}
}
]
}
}
六、移动组件
6.1 xui.phone
核心属性：
width: 宽度height: 高度theme: 主题样式iniProp.sub: 移动组件配置
场景说明：移动应用容器，用于构建移动端界面，提供适配移动设备的布局和组件。
代码示例：
{
id: 'xui.phone',
iniProp: {
width: '100%',
height: '100%',
theme: 'light',
sub: [
{
id: 'xui.UI.TitleBlock',
iniProp: {
caption: '首页',
height: '50px',
bgColor: '#2d8cf0',
textColor: '#ffffff'
}
},
{
id: 'xui.UI.ContentBlock',
iniProp: {
width: '100%',
height: 'calc(100% - 100px)',
sub: [/* 内容区域组件 */]
}
},
{
id: 'xui.UI.ButtonLayout',
iniProp: {
height: '50px',
sub: [/* 底部导航按钮 */]
}
}
]
}
}
6.2 xui.UI.TitleBlock
核心属性：
caption: 标题文本height: 高度bgColor: 背景颜色textColor: 文本颜色leftBtn: 左侧按钮配置rightBtn: 右侧按钮配置
场景说明：移动端标题栏，通常位于页面顶部，显示页面标题和操作按钮。
代码示例：
{
id: 'xui.UI.TitleBlock',
iniProp: {
caption: '用户中心',
height: '48px',
bgColor: '#2d8cf0',
textColor: '#ffffff',
leftBtn: {
iconClass: 'icon-back',
onClick: 'goBack()'
},
rightBtn: {
iconClass: 'icon-setting',
onClick: 'openSetting()'
}
}
}
6.3 xui.UI.ContentBlock
核心属性：
width: 宽度height: 高度padding: 内边距bgColor: 背景颜色iniProp.sub: 内容组件
场景说明：移动端内容区域，用于承载页面的主要内容，支持滚动。
代码示例：
{
id: 'xui.UI.ContentBlock',
iniProp: {
width: '100%',
height: 'calc(100% - 100px)',
padding: '10px',
bgColor: '#f5f5f5',
sub: [
{
id: 'xui.UI.Block',
iniProp: {
width: '100%',
height: '100px',
bgColor: '#ffffff',
borderRadius: '5px',
marginBottom: '10px',
sub: [/* 用户信息组件 */]
}
},
{
id: 'xui.UI.Block',
iniProp: {
width: '100%',
height: 'auto',
bgColor: '#ffffff',
borderRadius: '5px',
sub: [/* 功能列表组件 */]
}
}
]
}
}
6.4 xui.UI.ButtonLayout
核心属性：
height: 高度itemWidth: 按钮宽度bgColor: 背景颜色activeColor: 激活状态颜色iniProp.sub: 按钮组件
场景说明：移动端底部导航栏，用于在移动端应用中切换不同的功能模块。
代码示例：
{
id: 'xui.UI.ButtonLayout',
iniProp: {
height: '50px',
itemWidth: 'auto',
bgColor: '#ffffff',
activeColor: '#2d8cf0',
sub: [
{
id: 'xui.UI.Button',
iniProp: {
caption: '首页',
iconClass: 'icon-home',
layoutData: '0,0,1,1',
type: 'text',
active: true,
onClick: 'switchTab("home")'
}
},
{
id: 'xui.UI.Button',
iniProp: {
caption: '发现',
iconClass: 'icon-discover',
layoutData: '1,0,1,1',
type: 'text',
active: false,
onClick: 'switchTab("discover")'
}
},
{
id: 'xui.UI.Button',
iniProp: {
caption: '消息',
iconClass: 'icon-message',
layoutData: '2,0,1,1',
type: 'text',
active: false,
onClick: 'switchTab("message")'
}
},
{
id: 'xui.UI.Button',
iniProp: {
caption: '我的',
iconClass: 'icon-user',
layoutData: '3,0,1,1',
type: 'text',
active: false,
onClick: 'switchTab("profile")'
}
}
]
}
}
6.5 xui.UI.MTabs
核心属性：
height: 高度selMode: 选择模式activeIndex: 默认激活索引tabHeight: 标签高度iniProp.sub: 标签页配置
场景说明：移动端标签页组件，用于在移动端实现内容的分类展示和切换。
代码示例：
{
id: 'xui.UI.MTabs',
iniProp: {
height: '100%',
selMode: 'single',
activeIndex: 0,
tabHeight: '40px',
sub: [
{
id: 'xui.UI.MTabPage',
iniProp: {
caption: '推荐',
value: 'recommend',
sub: [/* 推荐内容组件 */]
}
},
{
id: 'xui.UI.MTabPage',
iniProp: {
caption: '热点',
value: 'hot',
sub: [/* 热点内容组件 */]
}
},
{
id: 'xui.UI.MTabPage',
iniProp: {
caption: '关注',
value: 'follow',
sub: [/* 关注内容组件 */]
}
}
]
}
}
6.6 xui.UI.MTabPage
核心属性：
caption: 标签标题value: 标签值iconClass: 图标样式类iniProp.sub: 标签页内容组件
场景说明：移动端标签页内容组件，作为MTabs的子组件，承载具体的标签页内容。
代码示例：
{
id: 'xui.UI.MTabPage',
iniProp: {
caption: '推荐',
value: 'recommend',
iconClass: 'icon-star',
sub: [
{
id: 'xui.UI.ContentBlock',
iniProp: {
width: '100%',
height: '100%',
sub: [/* 推荐列表组件 */]
}
}
]
}
}
6.7 xui.UI.MTreeView
核心属性：
width: 宽度height: 高度selMode: 选择模式iniFold: 是否初始折叠showLine: 是否显示连接线iniProp.sub: 树形节点配置
场景说明：移动端树形视图，用于在移动端展示层级结构数据，支持展开/折叠操作。
代码示例：
{
id: 'xui.UI.MTreeView',
iniProp: {
width: '100%',
height: '300px',
selMode: 'single',
iniFold: true,
showLine: true,
sub: [
{
id: 'xui.UI.MTreeNode',
iniProp: {
caption: '文件夹1',
iconClass: 'icon-folder',
sub: [
{
id: 'xui.UI.MTreeNode',
iniProp: {
caption: '文件1-1',
iconClass: 'icon-file'
}
},
{
id: 'xui.UI.MTreeNode',
iniProp: {
caption: '文件1-2',
iconClass: 'icon-file'
}
}
]
}
},
{
id: 'xui.UI.MTreeNode',
iniProp: {
caption: '文件夹2',
iconClass: 'icon-folder',
sub: [
{
id: 'xui.UI.MTreeNode',
iniProp: {
caption: '文件2-1',
iconClass: 'icon-file'
}
},
{
id: 'xui.UI.MTreeNode',
iniProp: {
caption: '文件夹2-1',
iconClass: 'icon-folder',
sub: [
{
id: 'xui.UI.MTreeNode',
iniProp: {
caption: '文件2-1-1',
iconClass: 'icon-file'
}
}
]
}
}
]
}
}
]
}
}
6.8 xui.UI.MTreeNode
核心属性：
caption: 节点文本iconClass: 图标样式类value: 节点值checked: 是否选中disabled: 是否禁用sub: 子节点配置
场景说明：移动端树形节点，作为MTreeView的子组件，代表树形结构中的一个节点。
代码示例：
{
id: 'xui.UI.MTreeNode',
iniProp: {
caption: '产品分类',
iconClass: 'icon-category',
value: 'category',
checked: false,
disabled: false,
sub: [
{
id: 'xui.UI.MTreeNode',
iniProp: {
caption: '电子产品',
iconClass: 'icon-electronics',
value: 'electronics'
}
},
{
id: 'xui.UI.MTreeNode',
iniProp: {
caption: '服装鞋帽',
iconClass: 'icon-clothing',
value: 'clothing'
}
},
{
id: 'xui.UI.MTreeNode',
iniProp: {
caption: '食品饮料',
iconClass: 'icon-food',
value: 'food'
}
}
]
}
}
6.9 xui.UI.MDialog
核心属性：
caption: 标题width: 宽度height: 高度showClose: 是否显示关闭按钮mask: 是否显示遮罩position: 定位方式（center/top/bottom/left/right）iniProp.sub: 对话框内容组件
场景说明：移动端对话框，用于在移动端展示弹窗内容，如提示信息、确认框、表单等。
代码示例：
{
id: 'xui.UI.MDialog',
iniProp: {
caption: '提示',
width: '80%',
height: 'auto',
showClose: true,
mask: true,
position: 'center',
sub: [
{
id: 'xui.UI.Label',
iniProp: {
caption: '操作成功！',
fontSize: '16px',
align: 'center',
margin: '20px 0'
}
},
{
id: 'xui.UI.Button',
iniProp: {
caption: '确定',
width: '100%',
onClick: 'closeDialog()'
}
}
]
}
}
6.10 xui.UI.Camera
核心属性：
width: 宽度height: 高度mode: 模式（photo/video）quality: 质量onCapture: 拍摄完成事件onCancel: 取消事件
场景说明：移动端摄像头组件，用于调用设备摄像头进行拍照或录像。
代码示例：
{
id: 'xui.UI.Camera',
iniProp: {
width: '100%',
height: '300px',
mode: 'photo',
quality: 0.8,
onCapture: 'handleCapture(result)',
onCancel: 'handleCancel()'
}
}
6.11 xui.UI.Tensor
核心属性：
type: AI功能类型model: 模型名称input: 输入数据onResult: 结果回调loadingText: 加载提示文本
场景说明：AI插件组件，用于集成AI功能，如人脸识别、图像识别、语音识别等。
代码示例：
{
id: 'xui.UI.Tensor',
iniProp: {
type: 'imageRecognition',
model: 'mobilenet',
input: '#imagePreview',
onResult: 'handleRecognitionResult(result)',
loadingText: '识别中...'
}
}
七、数据展示组件
7.1 xui.UI.Table
核心属性：
width: 宽度height: 高度columns: 列配置data: 数据源pageSize: 每页行数selMode: 选择模式showHeader: 是否显示表头bordered: 是否显示边框striped: 是否显示斑马纹onRowClick: 行点击事件
场景说明：表格组件，用于展示结构化数据，支持排序、筛选、分页等功能。
代码示例：
{
id: 'xui.UI.Table',
iniProp: {
width: '100%',
height: '400px',
columns: [
{ field: 'id', caption: 'ID', width: '80px', sortable: true },
{ field: 'name', caption: '姓名', width: '120px' },
{ field: 'age', caption: '年龄', width: '80px', sortable: true },
{ field: 'gender', caption: '性别', width: '80px' },
{ field: 'email', caption: '邮箱', width: '200px' },
{ field: 'operation', caption: '操作', width: '150px', render: 'renderOperation' }
],
data: [],
pageSize: 10,
selMode: 'single',
showHeader: true,
bordered: true,
striped: true,
onRowClick: 'handleRowClick(row)'
}
}
7.2 xui.UI.TreeView
核心属性：
width: 宽度height: 高度selMode: 选择模式iniFold: 是否初始折叠showLine: 是否显示连接线showCheckBox: 是否显示复选框onSelect: 选择事件iniProp.sub: 树形节点配置
场景说明：树形视图组件，用于展示层级结构数据，如文件目录、组织架构等。
代码示例：
{
id: 'xui.UI.TreeView',
iniProp: {
width: '300px',
height: '400px',
selMode: 'single',
iniFold: true,
showLine: true,
showCheckBox: false,
onSelect: 'handleTreeSelect(node)',
sub: [
{
id: 'xui.UI.TreeNode',
iniProp: {
caption: '研发部',
iconClass: 'icon-department',
sub: [
{
id: 'xui.UI.TreeNode',
iniProp: {
caption: '前端团队',
iconClass: 'icon-team'
}
},
{
id: 'xui.UI.TreeNode',
iniProp: {
caption: '后端团队',
iconClass: 'icon-team'
}
},
{
id: 'xui.UI.TreeNode',
iniProp: {
caption: '测试团队',
iconClass: 'icon-team'
}
}
]
}
},
{
id: 'xui.UI.TreeNode',
iniProp: {
caption: '产品部',
iconClass: 'icon-department',
sub: [
{
id: 'xui.UI.TreeNode',
iniProp: {
caption: '产品设计',
iconClass: 'icon-team'
}
},
{
id: 'xui.UI.TreeNode',
iniProp: {
caption: '用户研究',
iconClass: 'icon-team'
}
}
]
}
}
]
}
}
7.3 xui.UI.TreeNode
核心属性：
caption: 节点文本iconClass: 图标样式类value: 节点值checked: 是否选中disabled: 是否禁用expanded: 是否展开sub: 子节点配置
场景说明：树形节点组件，作为TreeView的子组件，代表树形结构中的一个节点。
代码示例：
{
id: 'xui.UI.TreeNode',
iniProp: {
caption: '项目管理',
iconClass: 'icon-project',
value: 'project',
checked: false,
disabled: false,
expanded: true,
sub: [
{
id: 'xui.UI.TreeNode',
iniProp: {
caption: '项目计划',
iconClass: 'icon-plan',
value: 'plan'
}
},
{
id: 'xui.UI.TreeNode',
iniProp: {
caption: '任务分配',
iconClass: 'icon-task',
value: 'task'
}
},
{
id: 'xui.UI.TreeNode',
iniProp: {
caption: '进度跟踪',
iconClass: 'icon-progress',
value: 'progress'
}
},
{
id: 'xui.UI.TreeNode',
iniProp: {
caption: '风险管理',
iconClass: 'icon-risk',
value: 'risk'
}
}
]
}
}
7.4 xui.UI.ListView
核心属性：
width: 宽度height: 高度data: 数据源itemTemplate: 列表项模板itemHeight: 列表项高度onItemClick: 列表项点击事件pullRefresh: 是否支持下拉刷新infiniteScroll: 是否支持无限滚动
场景说明：列表视图组件，用于展示列表数据，支持自定义列表项模板和滚动加载。
代码示例：
{
id: 'xui.UI.ListView',
iniProp: {
width: '100%',
height: '400px',
data: [],
itemTemplate: '
{{name}}{{description}}',
itemHeight: '80px',
onItemClick: 'handleItemClick(item)',
pullRefresh: true,
infiniteScroll: true
}
}
7.5 xui.UI.Carousel
核心属性：
width: 宽度height: 高度data: 轮播数据interval: 轮播间隔（毫秒）autoplay: 是否自动轮播indicator: 是否显示指示器arrow: 是否显示箭头onChange: 轮播切换事件
场景说明：轮播图组件，用于展示多张图片或内容的轮播效果，常用于首页 banner 展示。
代码示例：
{
id: 'xui.UI.Carousel',
iniProp: {
width: '100%',
height: '300px',
data: [
{ src: 'banner1.jpg', alt: '轮播图1', link: '#' },
{ src: 'banner2.jpg', alt: '轮播图2', link: '#' },
{ src: 'banner3.jpg', alt: '轮播图3', link: '#' }
],
interval: 3000,
autoplay: true,
indicator: 'bottom',
arrow: 'hover',
onChange: 'handleCarouselChange(index)'
}
}
7.6 xui.UI.Card
核心属性：
width: 卡片宽度height: 卡片高度borderType: 边框类型caption: 卡片标题showHeader: 是否显示头部showFooter: 是否显示底部
场景说明：用于展示模块化内容的卡片组件，支持头部、主体和底部结构，常用于数据展示、信息卡片等场景。
代码示例：
{
id: 'xui.UI.Card',
iniProp: {
width: '300px',
height: '400px',
borderType: 'shadow',
caption: '用户信息卡片',
showHeader: true,
showFooter: true,
sub: [
{
id: 'xui.UI.CardHeader',
iniProp: {
height: '50px',
background: '#f5f5f5',
sub: [
{
id: 'xui.UI.Label',
iniProp: {
caption: '用户信息',
fontSize: 16,
fontWeight: 'bold'
}
}
]
}
},
{
id: 'xui.UI.CardBody',
iniProp: {
padding: '15px',
sub: [
{
id: 'xui.UI.Image',
iniProp: {
src: 'avatar.jpg',
width: '80px',
height: '80px',
borderRadius: '50%'
}
},
{
id: 'xui.UI.Label',
iniProp: {
caption: '用户名：张三',
top: '100px',
left: '20px'
}
},
{
id: 'xui.UI.Label',
iniProp: {
caption: '职位：前端开发工程师',
top: '130px',
left: '20px'
}
}
]
}
},
{
id: 'xui.UI.CardFooter',
iniProp: {
height: '40px',
background: '#f5f5f5',
sub: [
{
id: 'xui.UI.Button',
iniProp: {
caption: '编辑',
width: '60px',
height: '25px',
left: '180px'
}
}
]
}
}
]
}
}
7.7 xui.UI.Carousel
核心属性：
width: 轮播宽度height: 轮播高度interval: 切换间隔(毫秒)showIndicators: 是否显示指示器showControls: 是否显示控制按钮
场景说明：轮播图组件，用于展示多张图片或内容的轮播效果，常用于首页 banner、图片展示等场景。
代码示例：
{
id: 'xui.UI.Carousel',
iniProp: {
width: '600px',
height: '300px',
interval: 3000,
showIndicators: true,
showControls: true,
sub: [
{
id: 'xui.UI.CarouselItem',
iniProp: {
sub: [
{
id: 'xui.UI.Image',
iniProp: {
src: 'slide1.jpg',
width: '100%',
height: '100%'
}
}
]
}
},
{
id: 'xui.UI.CarouselItem',
iniProp: {
sub: [
{
id: 'xui.UI.Image',
iniProp: {
src: 'slide2.jpg',
width: '100%',
height: '100%'
}
}
]
}
},
{
id: 'xui.UI.CarouselItem',
iniProp: {
sub: [
{
id: 'xui.UI.Image',
iniProp: {
src: 'slide3.jpg',
width: '100%',
height: '100%'
}
}
]
}
}
]
}
}
7.8 xui.UI.Timeline
核心属性：
mode: 时间线模式(horizontal/vertical)reverse: 是否倒序itemGap: 时间线项间距
场景说明：时间线组件，用于展示时间顺序的事件或流程，常用于活动记录、流程跟踪等场景。
代码示例：
{
id: 'xui.UI.Timeline',
iniProp: {
mode: 'vertical',
reverse: false,
itemGap: '20px',
sub: [
{
id: 'xui.UI.TimelineItem',
iniProp: {
timestamp: '2023-01-01',
status: 'success',
sub: [
{
id: 'xui.UI.Label',
iniProp: {
caption: '项目启动'
}
}
]
}
},
{
id: 'xui.UI.TimelineItem',
iniProp: {
timestamp: '2023-03-15',
status: 'processing',
sub: [
{
id: 'xui.UI.Label',
iniProp: {
caption: '需求分析阶段'
}
}
]
}
},
{
id: 'xui.UI.TimelineItem',
iniProp: {
timestamp: '2023-06-30',
status: 'pending',
sub: [
{
id: 'xui.UI.Label',
iniProp: {
caption: '开发阶段'
}
}
]
}
}
]
}
}
7.9 xui.UI.Collapse
核心属性：
accordion: 是否手风琴模式bordered: 是否显示边框defaultActiveKey: 默认展开的面板key
场景说明：折叠面板组件，用于展示可折叠的内容区域，常用于内容分类展示、详情信息折叠等场景。
代码示例：
{
id: 'xui.UI.Collapse',
iniProp: {
accordion: true,
bordered: true,
defaultActiveKey: ['1'],
sub: [
{
id: 'xui.UI.CollapsePanel',
iniProp: {
key: '1',
caption: '面板1',
sub: [
{
id: 'xui.UI.Label',
iniProp: {
caption: '面板1内容'
}
}
]
}
},
{
id: 'xui.UI.CollapsePanel',
iniProp: {
key: '2',
caption: '面板2',
sub: [
{
id: 'xui.UI.Label',
iniProp: {
caption: '面板2内容'
}
}
]
}
},
{
id: 'xui.UI.CollapsePanel',
iniProp: {
key: '3',
caption: '面板3',
sub: [
{
id: 'xui.UI.Label',
iniProp: {
caption: '面板3内容'
}
}
]
}
}
]
}
}
7.10 xui.UI.Tag
核心属性：
color: 标签颜色size: 标签大小closable: 是否可关闭checkable: 是否可勾选
场景说明：标签组件，用于标记或分类内容，常用于标签页、分类标记、状态显示等场景。
代码示例：
{
id: 'xui.UI.Tag',
iniProp: {
color: '#f50',
size: 'middle',
closable: true,
caption: '标签1'
}
}
7.11 xui.UI.Badge
核心属性：
count: 徽章数量dot: 是否显示小红点status: 状态颜色text: 徽章文本
场景说明：徽章组件，用于显示未读数量、状态标记等，常用于通知提醒、状态显示等场景。
代码示例：
{
id: 'xui.UI.Badge',
iniProp: {
count: 5,
dot: false,
sub: [
{
id: 'xui.UI.Button',
iniProp: {
caption: '通知'
}
}
]
}
}
7.12 xui.UI.Progress
核心属性：
percent: 进度百分比status: 进度状态strokeWidth: 进度条宽度showInfo: 是否显示进度信息
场景说明：进度条组件，用于展示任务进度，常用于文件上传、任务完成度等场景。
代码示例：
{
id: 'xui.UI.Progress',
iniProp: {
percent: 60,
status: 'active',
strokeWidth: 10,
showInfo: true
}
}