Welink ui组件介绍Form(文本框)
【摘要】 Form(文本框)填写类表单-文本框。Form UI 提供与WeLink规范一致的表单视图。 <div class="page" style="background: #eee;"> <div class="page__hd"> <h1 class="page__title">Form</h1> <p class="page__...
Form(文本框)
填写类表单-文本框。Form UI 提供与WeLink规范一致的表单视图。
<div class="page" style="background: #eee;">
<div class="page__hd">
<h1 class="page__title">Form</h1>
<p class="page__desc">表单(填写)
</div>
<div class="page__bd">
<div class="weui-form_view">
<div class="weui-form_view-cell weui-form_view-cell__access weui-form_view-cell__line">
<div class="weui-form_view-cell__header ">标题<span class="weui-form_view_cell_nonull">*</span></div>
<div class="weui-form_view-cell__body weui-form_view-cell__align_rg">
<input id="input1" class="weui-input" type="text" placeholder="请输入"/>
</div>
</div>
<div class="weui-form_view-cell weui-form_view-cell__access">
<div class="weui-form_view-cell__header">标题标题标题标题标题标题标题标题标题标题</div>
<div class="weui-form_view-cell__body weui-form_view-cell__align_rg active">
<input id="input1" class="weui-input" type="text" placeholder="请输入"/>
</div>
</div>
</div>
<div class="weui-form_view" style="margin-top: 30px;">
<div class="weui-form_view-cell weui-form_view-cell__access weui-form_view-cell__explan">
<div class="weui-form_view-cell__explan-layout">
<div class="weui-form_view-cell__header">标题</div>
<div class="weui-form_view-cell__body active weui-form_view-cell__align_rg">
<input id="input1" class="weui-input" type="text" placeholder="请输入" value="输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容"/>
</div>
</div>
<div class="weui-form_view-cell__explan-text">
辅助文本说明,辅助文本说明辅助文本说明辅助文本说明
</div>
</div>
</div>
<div class="weui-form_view" style="margin-top: 30px;">
<div class="weui-form_view-cell weui-form_view-cell__access weui-form_view-cell__explan">
<div class="weui-form_view-cell__explan-layout">
<div class="weui-form_view-cell__header">标题</div>
<div class="weui-form_view-cell__body active weui-form_view-cell__align_rg">
<input id="input1" class="weui-input" type="text" placeholder="请输入"/>
</div>
</div>
<div class="weui-form_view-cell__explan-text weui-form_view-cell__explan-error">
错误信息校验,右对齐
</div>
</div>
</div>
<div class="weui-form_view" style="margin-top: 30px;">
<div class="weui-form_view-cell__verticality weui-form_view-cell__access weui-form_view-cell__explan">
<div class="weui-form_view-cell__header">标题</div>
<div class="weui-form_view-cell__body active">
<input id="input1" class="weui-input" type="text" placeholder="请输入"/>
</div>
<div class="weui-form_view-cell__explan-text">
辅助文本说明,辅助文本说明辅助文本说明辅助文本说明
辅助文本说明,辅助文本说明辅助文本说明辅助文本说明
</div>
</div>
</div>
<div class="weui-form_view" style="margin-top: 30px;">
<div class="weui-form_view-cell__verticality weui-form_view-cell__access weui-form_view-cell__explan">
<div class="weui-form_view-cell__header">标题</div>
<div class="weui-form_view-cell__body active">
<input id="input1" class="weui-input" type="text" placeholder="请输入" value="输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容输入的内容"/>
</div>
<div class="weui-form_view-cell__explan-text weui-form_view-cell__explan-error">
错误信息校验,左对齐
</div>
</div>
</div>
</div>
</div>
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论(0)