FormItem
全新的 FormItem 组件,相比于 Element 的 FormItem,它支持的功能更多,同时它的定位是纯样式组件,不管理表单状态,所以也会更轻量,更方便定制
Markup Schema 案例
JSON Schema 案例
Template 案例
常用属性案例
无边框案例
设置去除组件边框
内嵌模式案例
设置表单组件为内嵌模式
反馈信息定制案例
可通过 feedbackIcon
传入指定反馈的按钮
尺寸控制案例
API
FormItem
属性名 | 类型 | 描述 | 默认值 |
---|---|---|---|
style | CSSProperties | 样式 | - |
label | String | Vue Component | 标签 | - |
labelStyle | CSSProperties | 标签样式 | - |
wrapperStyle | CSSProperties | 组件容器样式 | - |
className | string | 组件样式类名 | - |
colon | boolean | 冒号 | - |
tooltip | String | Vue Component | 问号提示 | - |
tooltipLayout | `"icon" | "text"` | 问提示布局 |
labelAlign | "left" | "right" | 标签文本对齐方式 | "right" |
labelWrap | boolean | 标签换⾏,否则出现省略号,hover 有 tooltip | false |
labelWidth | number | 标签固定宽度 | - |
wrapperWidth | number | 内容固定宽度 | - |
labelCol | number | 标签⽹格所占列数,和内容列数加起来总和为 24 | - |
wrapperCol | number | 内容⽹格所占列数,和标签列数加起来总和为 24 | - |
wrapperAlign | "left" | "right" | 内容文本对齐方式⻬ | "left" |
wrapperWrap | boolean | 内容换⾏,否则出现省略号,hover 有 tooltip | false |
fullness | boolean | 内容撑满 | false |
addonBefore | String | Vue Component | 前缀内容 | - |
addonAfter | String | Vue Component | 后缀内容 | - |
size | "small" | "default" | "large" | 尺⼨ | - |
extra | ReactNode | 扩展描述⽂案 | - |
feedbackText | ReactNode | 反馈⽂案 | - |
feedbackLayout | "loose" | "terse" | "popover" | "none" | 反馈布局 | - |
feedbackStatus | "error" | "warning" | "success" | "pending" | 反馈布局 | - |
feedbackIcon | string | 反馈图标 | - |
required | boolean | 星号提醒 | - |
asterisk | boolean | 星号提醒 | - |
gridSpan | number | ⽹格布局占宽 | - |
FormItem.BaseItem
纯样式组件,属性与 FormItem 一样,与 Formily Core 不做状态桥接,主要用于一些需要依赖 FormItem 的样式布局能力,但不希望接入 Field 状态的场景