Badge

  • list item
    9
  • list item
    11
  • list item
    99
  • 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> <li class="item"> <span class="mark">当前类别</span> <div class="cont"> <span class="yo-badge yo-badge-tag">便宜</span> <span class="yo-badge yo-badge-tag">实惠</span> <span class="yo-badge yo-badge-tag">好用</span> </div> </li> </ul>

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

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

全局扩展方式:

@include yo-badge(normal,gray);

使用方法:

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

局部扩展方式:

.xxx{ @include yo-badge(normal,gray); }

使用方法:

<div class="xxx"> <span class="yo-badge yo-badge-normal">9</span> </div>
@include yo-badge(
    $name:default, //{default | String} yo-badge名称
    $bgcolor:default, //{default | Color} yo-badge背景色
    $color:default, //{default | Color} yo-badge文本色
    $radius:default, //{default | Number} yo-badge圆角
    $font-size:default //{default | Length} yo-badge字号
)