代码演示

基本形式

与表单组件一起使用; 建议一个form.item内部只放一个表单组件;

<form.item title="用户名">
    <ui.input type="text" placeholder="请输入用户名" autofocus />
</form.item>

表单项

在表单中使用

<ui.form>
    <form.item cols="6" title="用户名" tip="优先输入国内邮箱" required>
        <ui.input type="email" placeholder="请输入用户名" />
    </form.item>
    <form.item cols="6" title="密码">
        <ui.input type="password" placeholder="请输入密码" />
    </form.item>
</ui.form>

横向排列

<ui.form>
    <form.item cols="6" title="用户名" tip="优先输入国内邮箱" required row>
        <ui.input type="email" placeholder="请输入用户名" />
    </form.item>
    <form.item cols="6" title="密码" tip="推荐人的全名" row>
        <ui.input type="password" placeholder="请输入密码" />
    </form.item>
</ui.form>

label固定宽度

<ui.form>
    <form.item cols="6" title="用户名" tip="优先输入国内邮箱" required row labelSize="80px">
        <ui.input type="email" placeholder="请输入用户名" />
    </form.item>
    <form.item cols="6" title="密码" tip="推荐人的全名" row labelSize="80px">
        <ui.input type="password" placeholder="请输入密码" />
    </form.item>
</ui.form>

label对齐方式

<ui.form>
    <form.item cols="6" title="用户名" tip="优先输入国内邮箱" required row textAlign="left">
        <ui.input type="email" placeholder="请输入用户名" />
    </form.item>
    <form.item cols="6" title="密码" tip="推荐人的全名" row textAlign="left">
        <ui.input type="password" placeholder="请输入密码" />
    </form.item>
</ui.form>

API

FormItem

Kind: global class
Extend: Validation

new FormItem()

Param Type Default Description
[options.data] object = 绑定属性
[options.data.title] string => label显示的文字
[options.data.cols] number => [deprecated]布局列数, 请使用布局组件代替直接设置cols属性
[options.data.labelCols] number => [deprecated]如果有title, label占的列数, 建议使用labelSize
[options.data.labelSize] string | number 200 => 如果有title, label占的宽度,可以是px单位的数字,也可以是sm, md, lg, xlg
[options.data.labelLineHeight] string "\"lg\"" => label line-height 属性: 可以是数字值,也可以是sm(值:1), md(值:1.3), lg(值:2.5)
[options.data.textAlign] string "none" => label text-align 属性：none/left/right
[options.data.required] boolean false => 是否必选项
[options.data.tip] string => 字段说明
[options.data.class] string => 样式扩展
[options.data.layout] string "''" => 排列方式: 默认(横着排)/vertical/inline;
[options.data.sourceKey] string => 异步获取下拉列表接口的索引值
← 日期选择 多级选择 →
想让文档更完善？ 来 GitHub 提个 PR 吧！