Badge

  • list item
    9
  • list item
    9
  • list item
    9
  • list item
  • list item
    999
  • 当前类别
    便宜 实惠 好用
<ul class="yo-list"> <li class="item"> <div class="cont flex">list item</div> <span class="yo-badge">9</span> </li> <li class="item"> <div class="cont flex">list item</div> <span class="yo-badge yo-badge-normal">11</span> </li> <li class="item"> <div class="cont flex">list item</div> <span class="yo-badge">99</span> </li> ... </ul>

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

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

全局扩展方式:

@include yo-badge( $name: normal, $bordercolor: gray );

使用方法:

<span class="yo-badge">9</span>

局部扩展方式:

.xxx { @include yo-badge( $name: normal, $bordercolor: gray ); }

使用方法:

<div class="xxx"> <span class="yo-badge yo-badge-normal">9</span> </div>
@include yo-badge(
    $name:default, //{String} yo-badge名称
    $padding:default, //{Length} 内补白
    $border-width:default, //{Length} 边框厚度
    $bordercolor:default, //{Color} 边框色
    $bgcolor:default, //{Color} 背景色
    $color:default, //{Color} 文本色
    $radius:default, //{Number} 圆角半径大小
    $font-size:default //{Length} 字号
)