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(normal,default,default,default,#ddd,#fafafa);

使用方法:

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

局部扩展方式:

.xxx{ @include yo-header(normal,default,default,default,#ddd,#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(positive,default,default,default,#145fd7,#4a87ee,#fff);

使用方法:

<h2 class="yo-header yo-header-positive">Positive Header</h2>

局部扩展方式:

.xxx{ @include yo-header(positive,default,default,default,#145fd7,#4a87ee,#fff); }

使用方法:

<div class="xxx"> <h2 class="yo-header yo-header-positive">Positive Header</h2> </div>
@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两侧的子项文本大小
)