Welink ui组件介绍Form(文本框)

举报
云会议运营喵大人 发表于 2020/02/19 18:33:13 2020/02/19
【摘要】 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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。