Welink ui筛选组件介绍DropDown

举报
云会议运营喵大人 发表于 2020/02/20 19:39:31 2020/02/20
【摘要】 DropDown下拉筛选。DropDown UI UI提供与WeLink规范一致的视图,包含: <div class="weui_dropdown_continer"> <div class="weui-flex"> <div class="weui-flex__item weui-flex-dropdown__item"> ...

DropDown


下拉筛选。DropDown UI UI提供与WeLink规范一致的视图,包含:

    <div class="weui_dropdown_continer">
        <div class="weui-flex">
            <div class="weui-flex__item weui-flex-dropdown__item">
                <div class="weui-dropdown-view_header">
                    <div class="weui-dropdown-header__item">
                        审核中
                    </div>
                    <div class="weui-dropdown-header_active">
                        <i class="icon-12 icon-12-arrowBottom" />
                    </div>
                </div>

                <div class="weui_dropdown_body weui_dropdown_body_toggle">
                    <div class="weui_dropdown_body_bg" />
                    <div class="weui-cells weui-cells_radio weui_dropdown_body_list">
                        <label class="weui-cell weui-cell-list weui-check__label" for="all1">
                            <div class="weui-cell__bd">
                                <p>全部</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup1" class="weui-check" id="all1" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="a1">
                            <div class="weui-cell__bd weui-cells__active">
                                <p>审核中</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup1" class="weui-check" checked="checked" id="a1" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="b1">
                            <div class="weui-cell__bd">
                                <p>驳回</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup1" class="weui-check" id="b1" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="c1">
                            <div class="weui-cell__bd">
                                <p>完成</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup1" class="weui-check" id="c1" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                    </div>
                </div>

            </div>
            <div class="weui-flex__item weui-flex-dropdown__item">
                <div class="weui-dropdown-view_header">
                    <div class="weui-dropdown-header__item">
                        求助
                    </div>
                    <div class="weui-dropdown-header_active">
                        <i class="icon-12 icon-12-arrowBottom" />
                    </div>
                </div>


                <div class="weui_dropdown_body weui_dropdown_body_toggle">
                    <div class="weui_dropdown_body_bg" />
                    <div class="weui-cells weui-cells_radio weui_dropdown_body_list">
                        <label class="weui-cell weui-cell-list weui-check__label" for="all2">
                            <div class="weui-cell__bd ">
                                <p>全部</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup2" class="weui-check" id="all2" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="a2">
                            <div class="weui-cell__bd weui-cells__active">
                                <p>求组</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup2" class="weui-check" checked="checked" id="a2" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="b2">
                            <div class="weui-cell__bd">
                                <p>讨论</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup2" class="weui-check" id="b2" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="c2">
                            <div class="weui-cell__bd">
                                <p>博客</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup2" class="weui-check" id="c2" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="d2">
                            <div class="weui-cell__bd">
                                <p>社区</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup2" class="weui-check" id="d2" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                    </div>
                </div>

            </div>
            <div class="weui-flex__item weui-flex-dropdown__item">
                <div class="weui-dropdown-view_header">
                    <div class="weui-dropdown-header__item">
                        学士
                    </div>
                    <div class="weui-dropdown-header_active">
                        <i class="icon-12 icon-12-arrowBottom" />
                    </div>
                </div>


                <div class="weui_dropdown_body weui_dropdown_body_toggle">
                    <div class="weui_dropdown_body_bg" />
                    <div class="weui-cells weui-cells_radio weui_dropdown_body_list">
                        <label class="weui-cell weui-cell-list weui-check__label" for="all3">
                            <div class="weui-cell__bd">
                                <p>全部</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup3" class="weui-check" id="all3" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="a3">
                            <div class="weui-cell__bd weui-cells__active">
                                <p>学士</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup3" class="weui-check" checked="checked" id="a3" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="b3">
                            <div class="weui-cell__bd">
                                <p>硕士</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup3" class="weui-check" id="b3" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="c3">
                            <div class="weui-cell__bd">
                                <p>博士</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup3" class="weui-check" id="c3" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="d3">
                            <div class="weui-cell__bd">
                                <p>顾问</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup3" class="weui-check" id="d3" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="d3">
                            <div class="weui-cell__bd">
                                <p>专家</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup3" class="weui-check" id="d3" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="weui_dropdown_continer" style="margin-top: 200px;">
        <div class="weui-dropdown-view_header">
            <div class="weui-dropdown-header__item">
                全部
            </div>
            <div class="weui-dropdown-header_active">
                <i class="icon-12 icon-12-arrowTopRed" />
            </div>
        </div>

        <div class="weui_dropdown_body">
            <div class="weui_dropdown_body_bg" />
            <div class="weui-cells weui-cells_radio weui_dropdown_body_list">
                <label class="weui-cell weui-cell-list weui-check__label" for="all">
                    <div class="weui-cell__bd weui-cells__active">
                        <p>全部</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" checked="checked" id="all" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="a">
                    <div class="weui-cell__bd">
                        <p>上尉</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="a" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="b">
                    <div class="weui-cell__bd">
                        <p>中尉</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="b" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="c">
                    <div class="weui-cell__bd">
                        <p>上尉</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="c" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="d">
                    <div class="weui-cell__bd">
                        <p>少校</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="d" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="d">
                    <div class="weui-cell__bd">
                        <p>中校</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="d" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="d">
                    <div class="weui-cell__bd">
                        <p>上校</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="d" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="d">
                    <div class="weui-cell__bd">
                        <p>少将</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="d" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="d">
                    <div class="weui-cell__bd">
                        <p>中将</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="d" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="d">
                    <div class="weui-cell__bd">
                        <p>上将</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="d" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="d">
                    <div class="weui-cell__bd">
                        <p>将军</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="d" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="d">
                    <div class="weui-cell__bd">
                        <p>元帅</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="d" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

            </div>
        </div>
    </div>


【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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