普通头部

示例描述:

<h2 class="yo-header">普通头部</h2>

示例描述:

<div class="yo-header"> <h2 class="title">带左右操作栏的头部</h2> <span class="regret">取消</span> <span class="affirm">确定</span> </div>

带返回按钮的头部

设置

示例描述:

<div class="yo-header"> <h2 class="title">带返回按钮的头部</h2> <span class="regret yo-ico">&#xf07d;</span> <span class="affirm">设置</span> </div>

自定义的头部

返回 设置

假设你想要多种风格,只需这样扩展:

// 自定义一个 `yo-header-normal` 头部 @include yo-header( $name: normal, $bordercolor: #ddd, $bgcolor: #eee, $color: map-get($base, color), $item-ico-color: map-get($base, color) );

使用方法

<div class="yo-header yo-header-normal"> <h2 class="title">自定义的头部</h2> <span class="regret"> <i class="yo-ico">&#xf07d;</i> 返回 </span> <span class="affirm">设置</span> </div>
@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大小
)