Welink ui筛选组件介绍DropDown
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>
- 点赞
- 收藏
- 关注作者
评论(0)