# 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 状态的场景

Last Updated: 12/8/2021, 5:25:30 AM