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">
                    <div class="weui-form_view-cell__header">标题</div>
                    <div class="weui-form_view-cell__body weui-form_view-cell__align_rg">
                        <div class="weui-form_view-cell__access_text">
                            请选择
                        </div>
                        <i class="icon-16 icon-16-arrowRight"></i>
                    </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__line">
                    <div class="weui-form_view-cell__header">标题</div>
                    <div class="weui-form_view-cell__body weui-form_view-cell__align_rg ">
                        <div class="weui-form_view-cell__access_text">
                            请选择
                        </div>
                        <i class="icon-16 icon-16-arrowRight"></i>
                    </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">
                        <div class="weui-form_view-cell__access_text active">
                            已选择内容
                        </div>
                        <i class="icon-16 icon-16-arrowRight"></i>
                    </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 weui-form_view-cell__align_rg">
                            <div class="weui-form_view-cell__access_text">
                                请选择
                            </div>
                            <i class="icon-16 icon-16-arrowRight"></i>
                        </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__verticality weui-form_view-cell__access weui-form_view-cell__line">
                    <div class="weui-form_view-cell__header">
                        标题标题标题标题标题标题标题标题标题标题
                        标题标题标题标题标题标题标题标题标题标题
                    </div>
                    <div class="weui-form_view-cell__body ">
                        <div class="weui-form_view-cell__access_text">
                            请选择
                        </div>
                        <i class="icon-16 icon-16-arrowRight"></i>
                    </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 weui-form_view-cell__line">            
                    <div class="weui-form_view-cell__header">标题</div>
                    <div class="weui-form_view-cell__body">
                        <div class="weui-form_view-cell__access_text">
                            请选择
                        </div>
                        <i class="icon-16 icon-16-arrowRight"></i>
                    </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">
                        <div class="weui-form_view-cell__access_text active">
                            文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐文字数字左对齐
                        </div>
                        <i class="icon-16 icon-16-arrowRight"></i>
                    </div>
                    <div class="weui-form_view-cell__explan-text">
                        辅助文本说明，辅助文本说明辅助文本说明辅助文本说明
                    </div>
                </div>
            </div>
        </div>
    </div>