Loadtip

  • 下拉刷新:
  • 下拉刷新
  • 释放更新:
  • 释放更新
  • 加载中:
  • 加载中...
  • 加载中:
  • 加载中...
  • 更新失败:
  • 更新失败
  • 更新成功:
  • 更新成功
  • 单条加载:
  • 版本更新
  • 其他
<div class="yo-loadtip"> <i class="yo-ico">&#xf063;</i> <div class="text">下拉刷新</div> </div>

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

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

全局扩展方式:

@include yo-loadtip( $name: test, $color: #4a87ee );

使用方法:

<div class="yo-loadtip yo-loadtip-test"> <i class="yo-ico">&#xf063;</i> <div class="text">下拉刷新</div> </div>

局部扩展方式:

.xxx{ @include yo-loadtip( $name: test, $color: #4a87ee ); }

使用方法:

<div class="xxx"> <div class="yo-loadtip yo-loadtip-test"> <i class="yo-ico">&#xf063;</i> <div class="text">下拉刷新</div> </div> </div>
@include yo-loadtip(
    $name:default, //{default | String} loadtip名称
    $color:default, //{default | Color} 定义loadtip文本色
    $font-size:default, //{default | Length} 定义loadtip字号
    $ico-color:default //{default | Color} 定义loadtip ico颜色
)