如果想仅使用图标作为子项内容:
并且可以自定义图标大小
@include yo-tab(
$name: xxx,
$only-ico-size: .2rem
);
纵向图标示例:
并且可以自定义图标大小
@include yo-tab(
$name: xxx,
$y-ico-size: .2rem
);
横向图标示例:
并且可以自定义图标大小
@include yo-tab(
$name: xxx,
$x-ico-size: .12rem,
// 对子项间隔线的设置
$item-border-height: .2rem,
$item-bordercolor: map-get($base, sub-bordercolor)
);
局部tab选项形态:
可以这样扩展:
@include yo-tab(
$name: test,
$width: 2rem,
$border-width: 1px,
$bordercolor: #1ba9ba,
$font-size: .12rem,
$radius: .05rem,
$on-bgcolor: #1ba9ba,
$on-color: #fff
);
@include yo-tab(
$name:default, //{String} 扩展的名称
$width:default,1.8.3 //{Length} 组件宽度
$height:default, //{Length} 组件高度
$radius:default, //{Length} 圆角半径
$border-width:default, //{Length} 边框厚度
$bordercolor:default, //{Color} 外边框色
$bgcolor:default, //{Color} y背景色
$color:default, //{Color} 文本色
$on-bgcolor:default, //{Color} 激活时背景色
$on-color:default, //{Color} 激活时文本色
$font-size:default, //{Length} 文本大小
$x-ico-size:default, //{Length} 横向图标大小
$y-ico-size:default, //{Length} 纵向图标大小
$only-ico-size:default, //{Length} 仅有图标大小
$item-border-height:default, //{Length} 子项间隔线高度
$item-bordercolor:default //{Length} 子项间隔线颜色
)