Welink ui组件介绍TabSelection
【摘要】 TabSelectionTabSelection UI 提供与WeLink规范一致的视图<div class="page"> <div class="page__hd"> <h1 class="page__title">TabSelection</h1> <p class="page__desc">分段选择</p> </div> <div class="page__bd">...
TabSelection
TabSelection UI 提供与WeLink规范一致的视图
<div class="page">
<div class="page__hd">
<h1 class="page__title">TabSelection</h1>
<p class="page__desc">分段选择</p>
</div>
<div class="page__bd">
<div class="weui-cells weui-cells_form">
<div class="weui-cell weui-cell-list">
<div class="weui-cell__bd weui-cell__multipline">
左右结构单行
</div>
<div class="weui-tabselection weui-tabselection__horizontal">
<label class="weui-tabselection__tab weui-tabselection__tab_checked">
<span class="weui-tabselection__tab__btn">
<input type="radio" class="weui-tabselection__tab__input" value="small"/>
<span class="ant-radio-button-inner"></span>
</span>
<span>Small</span>
</label>
<label class="weui-tabselection__tab">
<span class="weui-tabselection__tab__btn">
<input type="radio" class="weui-tabselection__tab__input" value="default"/>
<span class="ant-radio-button-inner" ></span>
</span><span>Default</span>
</label>
</div>
</div>
<div class="weui-cell weui-cell-list">
<div class="weui-cell__bd weui-cell__multipline">
左右结构多行左右结构多行左右结构多行左右结构多行
</div>
<div class="weui-tabselection weui-tabselection__horizontal">
<label class="weui-tabselection__tab weui-tabselection__tab_checked">
<span class="weui-tabselection__tab__btn">
<input type="radio" class="weui-tabselection__tab__input" value="small"/>
<span class="ant-radio-button-inner"></span>
</span>
<span>Small</span>
</label>
<label class="weui-tabselection__tab">
<span class="weui-tabselection__tab__btn">
<input type="radio" class="weui-tabselection__tab__input" value="default"/>
<span class="ant-radio-button-inner" ></span>
</span><span>Default</span>
</label>
<label class="weui-tabselection__tab">
<span class="weui-tabselection__tab__btn">
<input type="radio" class="weui-tabselection__tab__input" value="large"/>
<span class="ant-radio-button-inner"></span>
</span>
<span>Large</span>
</label>
</div>
</div>
<div class="weui-cell weui-cell-list weui-cell__vertical">
<div class="weui-cell__bd weui-cell__multipline">
上下结构单行
</div>
<div class="weui-flex weui-tabselection">
<label class="weui-flex__item weui-tabselection__tab weui-tabselection__tab_checked">
<span class="weui-tabselection__tab__btn">
<input type="radio" class="weui-tabselection__tab__input" value="small"/>
<span class="ant-radio-button-inner"></span>
</span>
<span>Small</span>
</label>
<label class="weui-flex__item weui-tabselection__tab">
<span class="weui-tabselection__tab__btn">
<input type="radio" class="weui-tabselection__tab__input" value="default"/>
<span class="ant-radio-button-inner" ></span>
</span><span>Default</span>
</label>
</div>
</div>
<div class="weui-cell weui-cell-list weui-cell__vertical">
<div class="weui-cell__bd weui-cell__multipline">
上下结构单行
</div>
<div class="weui-flex weui-tabselection">
<label class="weui-flex__item weui-tabselection__tab weui-tabselection__tab_checked">
<span class="weui-tabselection__tab__btn">
<input type="radio" class="weui-tabselection__tab__input" value="small"/>
<span class="ant-radio-button-inner"></span>
</span>
<span>Small</span>
</label>
<label class="weui-flex__item weui-tabselection__tab">
<span class="weui-tabselection__tab__btn">
<input type="radio" class="weui-tabselection__tab__input" value="default"/>
<span class="ant-radio-button-inner" ></span>
</span><span>Default</span>
</label>
<label class="weui-flex__item weui-tabselection__tab">
<span class="weui-tabselection__tab__btn">
<input type="radio" class="weui-tabselection__tab__input" value="large"/>
<span class="ant-radio-button-inner"></span>
</span>
<span>Large</span>
</label>
</div>
</div>
<div class="weui-cell weui-cell-list weui-cell__vertical">
<div class="weui-cell__bd weui-cell__multipline">
上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行
</div>
<div class="weui-flex weui-tabselection">
<label class="weui-flex__item weui-tabselection__tab weui-tabselection__tab_checked">
<span class="weui-tabselection__tab__btn">
<input type="radio" class="weui-tabselection__tab__input" value="small"/>
<span class="ant-radio-button-inner"></span>
</span>
<span>选项1</span>
</label>
<label class="weui-flex__item weui-tabselection__tab">
<span class="weui-tabselection__tab__btn">
<input type="radio" class="weui-tabselection__tab__input" value="default"/>
<span class="ant-radio-button-inner" ></span>
</span>
<span>选项2</span>
</label>
<label class="weui-flex__item weui-tabselection__tab">
<span class="weui-tabselection__tab__btn">
<input type="radio" class="weui-tabselection__tab__input" value="large"/>
<span class="ant-radio-button-inner"></span>
</span>
<span>选项3</span>
</label>
<label class="weui-flex__item weui-tabselection__tab">
<span class="weui-tabselection__tab__btn">
<input type="radio" class="weui-tabselection__tab__input" value="large"/>
<span class="ant-radio-button-inner"></span>
</span>
<span>选项4</span>
</label>
</div>
</div>
<div class="weui-cell weui-cell-list weui-cell__vertical">
<div class="weui-cell__bd weui-cell__multipline">
上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行
</div>
<div class="weui-flex weui-tabselection">
<label class="weui-flex__item weui-tabselection__tab weui-tabselection__tab_checked">
<span class="weui-tabselection__tab__btn">
<input type="radio" class="weui-tabselection__tab__input" value="small"/>
<span class="ant-radio-button-inner"></span>
</span>
<span>选项1</span>
</label>
<label class="weui-flex__item weui-tabselection__tab">
<span class="weui-tabselection__tab__btn">
<input type="radio" class="weui-tabselection__tab__input" value="default"/>
<span class="ant-radio-button-inner" ></span>
</span>
<span>选项2</span>
</label>
<label class="weui-flex__item weui-tabselection__tab">
<span class="weui-tabselection__tab__btn">
<input type="radio" class="weui-tabselection__tab__input" value="large"/>
<span class="ant-radio-button-inner"></span>
</span>
<span>选项3</span>
</label>
<label class="weui-flex__item weui-tabselection__tab">
<span class="weui-tabselection__tab__btn">
<input type="radio" class="weui-tabselection__tab__input" value="large"/>
<span class="ant-radio-button-inner"></span>
</span>
<span>选项4</span>
</label>
<label class="weui-flex__item weui-tabselection__tab">
<span class="weui-tabselection__tab__btn">
<input type="radio" class="weui-tabselection__tab__input" value="large"/>
<span class="ant-radio-button-inner"></span>
</span>
<span>选项5</span>
</label>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('.weui-tabselection__tab').on('click', function () {
$(this).addClass('weui-tabselection__tab_checked').siblings('.weui-tabselection__tab_checked').removeClass('weui-tabselection__tab_checked');
});
});
</script>
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）