表单控件 control

用法

用于生成各类表单输入元素。

生成静态内容

zin 声明

control
(
    set::type('static'),
    set::id('user-lilei'),
    set::name('user'),
    set::value('李雷')
);

生成的 HTML

<div
    class="form-control-static"
    id="user-lilei"
    data-name="user"
>李雷</div>

生成 textarea

zin 声明

control
(
    set::type('textarea'),
    set::name('comment'),
    set::placeholder('请输入备注内容'),
);

生成的 HTML

<textarea
    class="form-control"
    rows="10"
    name="comment"
    placeholder="请输入备注内容"
    id="comment"
></textarea>

生成 inputControl

zin 声明

control
(
    set::type('inputControl'),
    set::name('account'),
    set::required(true),
    set::value('lilei')
);

生成的 HTML

<div class="input-control">
    <input
        class="form-control is-required"
        type="text"
        autocomplete="off"
        name="account"
        value="lilei"
        id="account"
    />
</div>

生成 checkbox

zin 声明

control
(
    set::type('checkbox'),
    set::name('edit'),
    set::required(true),
    set::text('编辑'),
);

生成的 HTML

<div class="check-list">
    <div class="checkbox-primary">
        <input type="checkbox" id="edit" name="edit" required="">
        <label for="edit">编辑</label>
    </div>
</div>

生成 checkList

zin 声明

control
(
    set::type('checkList'),
    set::name('interest'),
    set::value('code'),
    set::items(array(
        array('text' => '编程', 'value' => 'code', 'disabled' => true),
        array('text' => '音乐', 'value' => 'music', 'checked' => true),
        array('text' => '电影', 'value' => 'movie'),
        array('text' => '阅读', 'value' => 'read'),
    )),
);

生成的 HTML

<div class="check-list" id="interest">
    <div class="checkbox-primary disabled">
        <input type="checkbox" id="interest_code" name="interest" checked="" value="code" disabled="">
        <label for="interest_code">编程</label>
    </div>
    <div class="checkbox-primary">
        <input type="checkbox" id="interest_music" name="interest" checked="" value="music">
        <label for="interest_music">音乐</label>
        </div>
    <div class="checkbox-primary">
        <input type="checkbox" id="interest_movie" name="interest" value="movie">
        <label for="interest_movie">电影</label>
    </div>
    <div class="checkbox-primary">
        <input type="checkbox" id="interest_read" name="interest" value="read">
        <label for="interest_read">阅读</label>
    </div>
</div>

生成 checkListInline

zin 声明

control
(
    set::type('checkListInline'),
    set::name('interest'),
    set::value('code'),
    set::items(array(
        array('text' => '编程', 'value' => 'code', 'disabled' => true),
        array('text' => '音乐', 'value' => 'music', 'checked' => true),
        array('text' => '电影', 'value' => 'movie'),
        array('text' => '阅读', 'value' => 'read'),
    )),
);

生成的 HTML

<div class="check-list-inline" id="interest">
    <div class="checkbox-primary disabled">
        <input type="checkbox" id="interest_code" name="interest" checked="" value="code" disabled="">
        <label for="interest_code">编程</label>
    </div>
    <div class="checkbox-primary">
        <input type="checkbox" id="interest_music" name="interest" checked="" value="music">
        <label for="interest_music">音乐</label>
    </div>
    <div class="checkbox-primary">
        <input type="checkbox" id="interest_movie" name="interest" value="movie">
        <label for="interest_movie">电影</label>
    </div>
    <div class="checkbox-primary">
        <input type="checkbox" id="interest_read" name="interest" value="read">
        <label for="interest_read">阅读</label>
    </div>
</div>

生成 radioList

zin 声明

control
(
    set::type('radioList'),
    set::name('contact'),
    set::value('email'),
    set::items([
        array('text' => '邮件', 'value' => 'mail', 'disabled' => true),
        array('text' => '电子邮件', 'value' => 'email'),
        array('text' => '电话', 'value' => 'phone'),
    ]),
);

生成的 HTML

<div class="check-list" id="contact">
    <div class="radio-primary disabled">
        <input type="radio" id="contact_mail" name="contact" value="mail" disabled="">
        <label for="contact_mail">邮件</label>
    </div>
    <div class="radio-primary">
        <input type="radio" id="contact_email" name="contact" checked="" value="email">
        <label for="contact_email">电子邮件</label>
    </div>
    <div class="radio-primary">
        <input type="radio" id="contact_phone" name="contact" value="phone">
        <label for="contact_phone">电话</label>
    </div>
</div>

生成 radioListInline

zin 声明

control
(
    set::type('radioListInline'),
    set::name('contact'),
    set::value('email'),
    set::items([
        array('text' => '邮件', 'value' => 'mail', 'disabled' => true),
        array('text' => '电子邮件', 'value' => 'email'),
        array('text' => '电话', 'value' => 'phone'),
    ]),
);

生成的 HTML

<div class="check-list-inline" id="contact">
    <div class="radio-primary disabled">
        <input type="radio" id="contact_mail" name="contact" value="mail" disabled="">
        <label for="contact_mail">邮件</label>
    </div>
    <div class="radio-primary">
        <input type="radio" id="contact_email" name="contact" checked="" value="email">
        <label for="contact_email">电子邮件</label>
    </div>
    <div class="radio-primary">
        <input type="radio" id="contact_phone" name="contact" value="phone">
        <label for="contact_phone">电话</label>
    </div>
</div>

属性

名称	类型	可选	默认值	说明
control	string	✓	null	表单输入元素类型，值可以为：static, text, password, email, number, date, time, datetime, month, url, search, tel, color, picker, pri, severity, select, checkbox, radio, checkboxList, radioList, checkboxListInline, radioListInline, file, textarea, editor, upload, modulePicker。
type	string	✓	null	@deprecated 表单输入元素类型，值可以为：static, text, password, email, number, date, time, datetime, month, url, search, tel, color, picker, pri, severity, select, checkbox, radio, checkboxList, radioList, checkboxListInline, radioListInline, file, textarea, editor, upload, modulePicker。
id	string	✓	null	ID。
name	string	—	—	控件名称，可能影响到表单提交的域名称，如果是多个值的表单控件，可能需要将名称定义为 key[] 的形式。
value	string	✓	null	控件值。
placeholder	string	✓	null	占位文本。
readonly	bool	✓	null	是否只读。
required	bool	✓	null	是否为必填。
disabled	bool	✓	null	是否禁用。
builder	callable	✓	null	自定义构建函数。
items	array	✓	null	选项列表。