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