Header

  • list item
  • list item
  • list item
  • list item
<h2 class="yo-header">Header</h2>

这有可能是一个非常长的标题

取消 确定
  • list item
  • list item
  • list item
  • list item

假设你想要一个有操作类型的Header可以这样:

<div class="yo-header"> <h2 class="title">这有可能是一个非常长的标题</h2> <span class="regret">取消</span> <span class="affirm">确定</span> </div>

Normal Header

  • list item
  • list item
  • list item
  • list item

假设你想要有点的颜色,那么你可以这样扩展:

命名及颜色按照各自团队内部的FE/UI规范即可

全局扩展方式:

@include yo-header( $bordercolor: #ddd, $bgcolor: #fafafa );

使用方法:

<h2 class="yo-header yo-header-normal">Normal Header</h2>

局部扩展方式:

.xxx { @include yo-header( $bordercolor: #ddd, $bgcolor: #fafafa ); }

使用方法:

<div class="xxx"> <h2 class="yo-header yo-header-normal">Normal Header</h2> </div>

Positive Header

取消 确定
  • list item
  • list item
  • list item
  • list item

假设你想要积极一点的颜色,那么你可以这样扩展:

命名及颜色按照各自团队内部的FE/UI规范即可

全局扩展方式:

@include yo-header( $name: positive, $bordercolor: #145fd7, $bgcolor: #4a87ee, $color: #fff );

使用方法:

<div class="yo-header yo-header-positive"> <h2 class="title">Positive Header</h2> <span class="regret">取消</span> <span class="affirm">确定</span> </div>

局部扩展方式:

.xxx { @include yo-header( $name: positive, $bordercolor: #145fd7, $bgcolor: #4a87ee, $color: #fff ); }

使用方法:

<div class="xxx"> <div class="yo-header yo-header-positive"> <h2 class="title">Positive Header</h2> <span class="regret">取消</span> <span class="affirm">确定</span> </div> </div>

Positive Header

  • list item
  • list item
  • list item
  • list item

假设你想要两侧是ico,那么你可以这样扩展:

命名及颜色按照各自团队内部的FE/UI规范即可

全局扩展方式:

@include yo-header( $name: positive, $bordercolor: #145fd7, $bgcolor: #4a87ee, $color: #fff, $item-ico-size: .2rem );

使用方法:

<div class="yo-header yo-header-positive"> <h2 class="title">Positive Header</h2> <span class="regret yo-ico">&#xf07d;</span> <span class="affirm yo-ico">&#xf067;</span> </div>

局部扩展方式:

.xxx { @include yo-header( $name: positive, $bordercolor: #145fd7, $bgcolor: #4a87ee, $color: #fff, $item-ico-size: .2rem ); }

使用方法:

<div class="xxx"> <div class="yo-header yo-header-positive"> <h2 class="title">Positive Header</h2> <span class="regret yo-ico">&#xf07d;</span> <span class="affirm yo-ico">&#xf067;</span> </div> </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大小
)