常规:

Button
Button
Button

示例描述:

<a href="?" class="yo-btn">Button</a> <button class="yo-btn">Button</button> <input type="button" value="Button" class="yo-btn" />

yo-btn预置了3种size:s, m, l

<a href="?" class="yo-btn yo-btn-s">Button</a> <a href="?" class="yo-btn yo-btn-m">Button</a> <a href="?" class="yo-btn yo-btn-l">Button</a>

你可以在业务代码配置文件config.scss中对这3种size进行定义

$btn: ( ... // {Length} 默认预设3种尺寸按钮: // small s-height: .28rem, s-font-size: .12rem, // medium m-height: .36rem, m-font-size: .14rem, // large l-height: .44rem, l-font-size: .16rem );

自定义按钮:

Button
Button
Button

自定义按钮:

Button
Button
Button

禁用:

Button
Button
Button

假设你想要多种风格的按钮,只需这样扩展:

// 自定义一个 `yo-btn-light` 按钮 @include yo-btn( $name: light, $bordercolor: #ddd, $bgcolor: #fff, $color: map-get($base, color) ); // 自定义一个 `yo-btn-info` 按钮 @include yo-btn( $name: info, $bordercolor: #0456e2, $bgcolor: #4a87ee );

使用方法:

<input class="yo-btn yo-btn-light" value="Button" /> <button class="yo-btn yo-btn-info">Button</button>

如果需要禁用按钮,你需要这样:

<input class="yo-btn yo-btn-light" value="Button" /> <button class="yo-btn yo-btn-info">Button</button> ↓↓↓ <input class="yo-btn yo-btn-disbaled" value="Button" /> <button class="yo-btn yo-btn-disabled">Button</button>

所有按钮的禁用时统一使用 `yo-btn-disabled`

通栏按钮:

`yo-btn-stacked` 让你拥有通栏按钮:

<input type="button" value="Button" class="yo-btn yo-btn-stacked" /> <button class="yo-btn yo-btn-stacked">Button</button>
@include yo-btn(
    $name:default, //{String} 扩展的名称
    $border-width:default, //{Length} 边框厚度
    $bordercolor:default, //{Color} 边框色
    $bgcolor:default, //{Color} 背景色
    $color:default, //{Color} 文本色
    $active-bordercolor:default, //{Color} 激活时边框色
    $active-bgcolor:default, //{Color} 激活时背景色
    $active-color:default, //{Color} 激活时文本色
    $padding:default, //{Length} 内补白
    $radius:default, //{Length} 圆角半径
    $font-size:default, //{Length} 字号
    $width:default, //{Length} 宽度
    $height:default //{Length} 高度
)