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" | 问提示布局 | "icon" | | 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 状态的场景