生态产品多个设计器现已发布候选版本

查看生态总览
跳转到内容

种类与属性 ​

内置种类按物料面板的分类列出。属性写成所在属性包里的路径(如 basic.label 即节点的 basic 里的 label);「名称」是属性面板里的中文名;「新建时」是在设计器里新建节点时写入的值,过长的值以 … 代替。

每个节点还有共有字段 type、id、kind、validation(静态元素没有)、linkage 与 extensions;字段与列表容器另有数据键 key,容器另有区域 regions。见模板类型。

表单设置 ​

没有选中节点时,属性面板编辑表单设置,存放在文档的 settings 里。

属性名称取值新建时
settings.labelPlacement标签位置top 上方、start 左侧"top"
settings.size尺寸sm 小、md 中、lg 大"md"
settings.disabled禁用布尔false
settings.readOnly只读布尔false

输入 ​

单行文本 text ​

字段 · 渲染为 <xh-text-field> · 值:字符串,空值 "" · 适用的校验:必填、长度、正则、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.placeholder占位符文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.inputType输入类型text 文本、email 邮箱、tel 电话、url 网址"text"
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—
appearance.prefix前缀文本—
appearance.suffix后缀文本—

多行文本 textarea ​

字段 · 渲染为 <xh-text-field> · 值:字符串,空值 "" · 适用的校验:必填、长度、正则、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.placeholder占位符文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—
appearance.minRows最少行数整数,≥ 1,≤ 503
appearance.maxRows最多行数整数,≥ 1,≤ 50—

可提及文本 mention ​

字段 · 渲染为 <xh-mention> · 值:字符串,空值 "" · 适用的校验:必填、长度、正则、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.placeholder占位符文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.options候选选项数组[]
data.optionSource候选来源文本—
data.optionDependencies候选依赖字符串数组—
data.triggerPrefix提及符号文本"@"
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

密码 password ​

字段 · 渲染为 <xh-password-input> · 值:字符串,空值 "" · 适用的校验:必填、长度、正则、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.placeholder占位符文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

数字 number ​

字段 · 渲染为 <xh-number-field> · 值:数值,空值 null · 适用的校验:必填、范围、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.placeholder占位符文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.step步长数值1
data.precision小数位数整数,≥ 0,≤ 20—
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—
appearance.prefix前缀文本—
appearance.suffix后缀文本—

验证码 pin ​

字段 · 渲染为 <xh-pin-input> · 值:字符串,空值 "" · 适用的校验:必填、长度、正则、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.placeholder占位符文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.length位数整数,≥ 1,≤ 126
data.mask遮挡输入布尔false
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

选择 ​

下拉选择 select ​

字段 · 渲染为 <xh-select> · 值:字符串(打开「多选」时为字符串数组),空值 null · 适用的校验:必填、长度、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.placeholder占位符文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.options选项选项数组[]
data.optionSource选项来源文本—
data.optionDependencies选项依赖字符串数组—
data.multiple多选布尔false
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

可输入下拉 combobox ​

字段 · 渲染为 <xh-combobox> · 值:字符串(打开「多选」时为字符串数组),空值 null · 适用的校验:必填、长度、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.placeholder占位符文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.options选项选项数组[]
data.optionSource选项来源文本—
data.optionDependencies选项依赖字符串数组—
data.multiple多选布尔false
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

级联选择 cascader ​

字段 · 渲染为 <xh-cascader> · 值:字符串数组(打开「多选」时为数组),空值 [] · 适用的校验:必填、长度、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.placeholder占位符文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.options选项选项树,每项可带 children 与 hasChildren[]
data.optionSource选项来源文本—
data.optionDependencies选项依赖字符串数组—
data.multiple多选布尔false
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

树选择 tree-select ​

字段 · 渲染为 <xh-tree-select> · 值:字符串(打开「多选」时为字符串数组),空值 null · 适用的校验:必填、长度、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.placeholder占位符文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.options选项选项树,每项可带 children 与 hasChildren[]
data.optionSource选项来源文本—
data.optionDependencies选项依赖字符串数组—
data.multiple多选布尔false
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

单选组 radio-group ​

字段 · 渲染为 <xh-radio-group> · 值:字符串,空值 null · 适用的校验:必填、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.options选项选项数组[]
data.optionSource选项来源文本—
data.optionDependencies选项依赖字符串数组—
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—
appearance.orientation排列方向horizontal 横排、vertical 竖排"horizontal"

多选组 checkbox-group ​

字段 · 渲染为 <xh-checkbox-group> · 值:字符串数组,空值 [] · 适用的校验:必填、长度、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.options选项选项数组[]
data.optionSource选项来源文本—
data.optionDependencies选项依赖字符串数组—
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—
appearance.orientation排列方向horizontal 横排、vertical 竖排"horizontal"

按钮组 toggle-group ​

字段 · 渲染为 <xh-toggle-group> · 值:字符串(打开「多选」时为字符串数组),空值 null · 适用的校验:必填、长度、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
data.options选项选项数组[]
data.optionSource选项来源文本—
data.optionDependencies选项依赖字符串数组—
data.multiple多选布尔false
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

列表 listbox ​

字段 · 渲染为 <xh-listbox> · 值:字符串(打开「多选」时为字符串数组),空值 null · 适用的校验:必填、长度、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.options选项选项数组[]
data.optionSource选项来源文本—
data.optionDependencies选项依赖字符串数组—
data.multiple多选布尔false
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

可选标签 tag-group ​

字段 · 渲染为 <xh-tag-group> · 值:字符串(打开「多选」时为字符串数组),空值 null · 适用的校验:必填、长度、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.options选项选项数组[]
data.optionSource选项来源文本—
data.optionDependencies选项依赖字符串数组—
data.multiple多选布尔false
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

穿梭框 transfer ​

字段 · 渲染为 <xh-transfer> · 值:字符串数组,空值 [] · 适用的校验:必填、长度、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.options选项选项数组[]
data.optionSource选项来源文本—
data.optionDependencies选项依赖字符串数组—
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

勾选框 checkbox ​

字段 · 渲染为 <xh-checkbox> · 值:布尔,空值 false · 适用的校验:必填、必须勾选、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

开关 switch ​

字段 · 渲染为 <xh-switch> · 值:布尔,空值 false · 适用的校验:必填、必须勾选、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

日期时间 ​

日期 date ​

字段 · 渲染为 <xh-date-picker> · 值:字符串,空值 null · 适用的校验:必填、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.placeholder占位符文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.withTime带时间布尔false
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

日期范围 date-range ​

字段 · 渲染为 <xh-date-range-picker> · 值:字符串数组,空值 [] · 适用的校验:必填、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.placeholder占位符文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.withTime带时间布尔false
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

时间 time ​

字段 · 渲染为 <xh-time-picker> · 值:字符串,空值 null · 适用的校验:必填、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.withSeconds带秒布尔false
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

时间范围 time-range ​

字段 · 渲染为 <xh-time-range-picker> · 值:字符串数组,空值 [] · 适用的校验:必填、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.withSeconds带秒布尔false
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

高级 ​

滑块 slider ​

字段 · 渲染为 <xh-slider> · 值:数值(打开「区间」时为数值数组),空值 null · 适用的校验:必填、范围、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.min最小值数值0
data.max最大值数值100
data.step步长数值1
data.range区间布尔false
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

评分 rating ​

字段 · 渲染为 <xh-rating> · 值:数值,空值 null · 适用的校验:必填、范围、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.count星数整数,≥ 1,≤ 105
data.allowHalf允许半星布尔false
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

颜色 color ​

字段 · 渲染为 <xh-color-picker> · 值:字符串,空值 null · 适用的校验:必填、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.format格式hex、rgba、hsla、oklch"hex"
data.swatches色板颜色字符串数组[]
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—
appearance.display展示方式picker 取色器、swatches 色板"picker"

标签 tags ​

字段 · 渲染为 <xh-tags-input> · 值:字符串数组,空值 [] · 适用的校验:必填、长度、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.placeholder占位符文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
data.max最大值整数,≥ 1,≤ 1000—
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

文件 file ​

字段 · 渲染为 <xh-file-upload> · 值:数组,空值 [] · 适用的校验:必填、长度、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
data.accept允许的类型文本—
data.maxFiles最多文件数整数,≥ 1,≤ 100—
data.uploadTarget上传位置文本—
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

签名 signature ​

字段 · 渲染为 <xh-signature-pad> · 值:对象,空值 null · 适用的校验:必填、表达式 · 联动动作:显示、隐藏、启用、禁用、必填、选填、赋值。

属性名称取值新建时
basic.label标签文本""
basic.hint提示多行文本—
basic.initialValue初始值任意 JSON 值,形状随字段的值—
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
basic.readOnly只读布尔false
appearance.labelHidden隐藏标签布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"
appearance.columnMinWidth列最小宽度整数,≥ 48,≤ 1024—

布局 ​

栅格 grid ​

容器 · 渲染为 <xh-grid> · 只管排版,对数据透明 · 区域 1 个起、最多 12 个 · 区域里能放任意节点 · 联动动作:显示、隐藏、启用、禁用。

属性名称取值新建时
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
appearance.gap间距xs 极小、sm 小、md 中、lg 大、xl 极大"md"

区域属性,存放在各区域的 props 里:

属性名称取值新建时
props.span跨列整数,≥ 1,≤ 126
props.offset左侧留空整数,≥ 0,≤ 11—

标签页 tabs ​

容器 · 渲染为 <xh-tabs> · 只管排版,对数据透明 · 区域 1 个起、不限上限 · 区域里能放任意节点 · 联动动作:显示、隐藏、启用、禁用。

属性名称取值新建时
basic.hidden隐藏布尔false
basic.disabled禁用布尔false

区域属性,存放在各区域的 props 里:

属性名称取值新建时
props.title标题文本""

卡片 card ​

容器 · 渲染为 <xh-card> · 只管排版,对数据透明 · 区域固定 1 个 · 区域里能放任意节点 · 联动动作:显示、隐藏、启用、禁用。

属性名称取值新建时
basic.title标题文本""
basic.hidden隐藏布尔false
basic.disabled禁用布尔false

折叠面板 collapse ​

容器 · 渲染为 <xh-accordion> · 只管排版,对数据透明 · 区域 1 个起、不限上限 · 区域里能放任意节点 · 联动动作:显示、隐藏、启用、禁用。

属性名称取值新建时
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
appearance.multiple多选布尔true

区域属性,存放在各区域的 props 里:

属性名称取值新建时
props.title标题文本""
props.expanded默认展开布尔true

分组 fieldset ​

容器 · 渲染为 <xh-fieldset> · 只管排版,对数据透明 · 区域固定 1 个 · 区域里能放任意节点 · 联动动作:显示、隐藏、启用、禁用。

属性名称取值新建时
basic.legend分组标题文本""
basic.hidden隐藏布尔false
basic.disabled禁用布尔false

表格布局 table ​

容器 · 渲染为 <xh-grid> · 只管排版,对数据透明 · 区域 1 个起、不限上限 · 区域里能放任意节点 · 联动动作:显示、隐藏、启用、禁用。

属性名称取值新建时
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
appearance.rows行数整数,≥ 1,≤ 1002
appearance.columns列数整数,≥ 1,≤ 122
appearance.bordered显示格线布尔true

区域属性,存放在各区域的 props 里:

属性名称取值新建时
props.row行整数,≥ 0,≤ 990
props.column列整数,≥ 0,≤ 110
props.rowSpan跨行整数,≥ 1,≤ 1001
props.columnSpan跨列整数,≥ 1,≤ 121

数据 ​

子表单 subform ​

容器 · 渲染为 <xh-field-array> · 带数据键,值是行对象的数组 · 区域固定 1 个 · 区域里能放任意节点 · 适用的校验:必填、长度、表达式 · 联动动作:显示、隐藏、启用、禁用。

属性名称取值新建时
basic.title标题文本""
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
data.initialRows初始行数整数,≥ 0,≤ 1000
data.movable可调整行序布尔true

子表 subtable ​

容器 · 渲染为 <xh-field-array> · 带数据键,值是行对象的数组 · 区域固定 1 个 · 区域里只能放字段 · 适用的校验:必填、长度、表达式 · 联动动作:显示、隐藏、启用、禁用。

属性名称取值新建时
basic.title标题文本""
basic.hidden隐藏布尔false
basic.disabled禁用布尔false
data.initialRows初始行数整数,≥ 0,≤ 1000
data.movable可调整行序布尔true

静态 ​

分隔线 divider ​

静态元素 · 渲染为 <xh-separator> · 联动动作:显示、隐藏。

属性名称取值新建时
basic.label标签文本—
basic.hidden隐藏布尔false

段落 paragraph ​

静态元素 · 渲染为 <xh-typography> · 联动动作:显示、隐藏。

属性名称取值新建时
basic.content内容多行文本""
basic.hidden隐藏布尔false
appearance.size尺寸sm 小、md 中、lg 大"md"

标题 heading ​

静态元素 · 渲染为 <xh-typography> · 联动动作:显示、隐藏。

属性名称取值新建时
basic.content内容文本""
basic.hidden隐藏布尔false
appearance.level级别2 二级、3 三级、4 四级、5 五级、6 六级3

提示 alert ​

静态元素 · 渲染为 <xh-alert> · 联动动作:显示、隐藏。

属性名称取值新建时
basic.title标题文本""
basic.content内容多行文本""
basic.hidden隐藏布尔false
appearance.tone语气info 信息、success 成功、warning 警告、danger 危险、neutral 中性"info"

图片 image ​

静态元素 · 渲染为 <xh-image> · 联动动作:显示、隐藏。

属性名称取值新建时
basic.src图片地址文本""
basic.alt替代文本文本""
basic.hidden隐藏布尔false
appearance.width宽度整数,≥ 16,≤ 4096—

条码 barcode ​

静态元素 · 渲染为 <xh-bar-code> · 联动动作:显示、隐藏。

属性名称取值新建时
basic.value编码内容文本""
basic.format码制code128、ean13、ean8、upca、upce、itf14、code39"code128"
basic.hidden隐藏布尔false
appearance.showText显示文字布尔true

二维码 qrcode ​

静态元素 · 渲染为 <xh-matrix-code> · 联动动作:显示、隐藏。

属性名称取值新建时
basic.value编码内容文本""
basic.format码制qr QR 码、data-matrix Data Matrix、pdf417 PDF417、aztec Aztec"qr"
basic.hidden隐藏布尔false

Released under The MIT License