Header
假设你想要一个有操作类型的Header可以这样:
这有可能是一个非常长的标题
取消
确定
假设你想要有点的颜色,那么你可以这样扩展:
命名及颜色按照各自团队内部的FE/UI规范即可
全局扩展方式:
@include yo-header(normal,default,default,default,#ddd,#fafafa);
使用方法:
Normal Header
局部扩展方式:
.xxx{
@include yo-header(normal,default,default,default,#ddd,#fafafa);
}
使用方法:
Normal Header
假设你想要积极一点的颜色,那么你可以这样扩展:
命名及颜色按照各自团队内部的FE/UI规范即可
全局扩展方式:
@include yo-header(positive,default,default,default,#145fd7,#4a87ee,#fff);
使用方法:
Positive Header
局部扩展方式:
.xxx{
@include yo-header(positive,default,default,default,#145fd7,#4a87ee,#fff);
}
使用方法:
Positive Header
@include yo-header( $name:default, //{default | String} yo-header名称 $height:default, //{default | Length} yo-header高度 $item-width:default, //{default | Length} yo-header两侧子项宽度 $item-space:default, //{default | Length} yo-header两侧子项离边界的间隙 $bordercolor:default, //{default | Color} yo-header边框色 $bgcolor:default, //{default | Color} yo-header背景色 $color:default, //{default | Color} yo-header文本色 $font-size:default, //{default | Length} yo-header文字大小 $item-color:default, //{default | Color} yo-header两侧的子项文本色 $item-font-size:default //{default | Length} yo-header两侧的子项文本大小 )