• Home
• Favorites
• Settings

示例描述：

<ul class="yo-tab"> <li class="item">Home</li> <li class="item item-on">Favorites</li> <li class="item">Settings</li> </ul>

• 
• 
• 

如果想仅使用图标作为子项内容：

<ul class="yo-tab"> <li class="item item-only-ico"> <i class="yo-ico">&#xf04a;</i> </li> <li class="item item-only-ico item-on"> <i class="yo-ico">&#xf04b;</i> </li> <li class="item item-only-ico"> <i class="yo-ico">&#xf07a;</i> </li> </ul>

并且可以自定义图标大小

@include yo-tab( $name: xxx, $only-ico-size: .2rem );

•  定位
•  无线
•  刷新

纵向图标示例：

<ul class="yo-tab yo-tab-view"> <li class="item item-y-ico"> <i class="yo-ico">&#xf04a;</i> 定位 </li> <li class="item item-y-ico item-on"> <i class="yo-ico">&#xf04b;</i> 无线 </li> <li class="item item-y-ico"> <i class="yo-ico">&#xf07a;</i> 刷新 </li> </ul>

并且可以自定义图标大小

@include yo-tab( $name: xxx, $y-ico-size: .2rem );

• 综合排序 
• 全部口味 
• 优惠活动 

横向图标示例：

<ul class="yo-tab yo-tab-filter"> <li class="item item-x-ico"> 综合排序 <i class="yo-ico">&#xf031;</i> </li> <li class="item item-x-ico item-on"> 全部口味 <i class="yo-ico">&#xf031;</i> </li> <li class="item item-x-ico"> 优惠活动 <i class="yo-ico">&#xf031;</i> </li> </ul>

并且可以自定义图标大小

@include yo-tab( $name: xxx, $x-ico-size: .12rem, // 对子项间隔线的设置 $item-border-height: .2rem, $item-border-color: map-get($base, sub-border-color) );

• Home
• Favorites

局部tab选项形态：

<ul class="yo-tab yo-tab-test"> <li class="item">Home</li> <li class="item item-on">Favorites</li> </ul>

可以这样扩展：

@include yo-tab( $name: test, $width: 2rem, $border-width: 1px, $border-color: #1ba9ba, $font-size: .12rem, $radius: .05rem, $on-bgcolor: #1ba9ba, $on-color: #fff );