按钮

基本使用

在要应用按钮样式的元素上添加.blend-button,再设置相应的颜色或者信息标识。

  • blend-button-default 默认颜色
  • blend-button-red 红色按钮
  • blend-button-gray 灰色按钮
  • blend-button-ltgray 浅灰色按钮
  • blend-button-primary 重要按钮
  • blend-button-secondary 次要按钮
<button class="blend-button blend-button-default">默认颜色</button>
<button class="blend-button blend-button-red">红色按钮</button>
<button class="blend-button blend-button-gray">灰色按钮</button>
<button class="blend-button blend-button-ltgray">浅灰色按钮</button>
<button class="blend-button blend-button-primary">重要按钮</button>
<button class="blend-button blend-button-secondary">次要按钮</button>

按钮大小

可以再次通过添加大小按钮 class 来标识按钮大小

  • blend-button-large 大按钮
  • blend-button-small 小按钮
  • blend-button-xs 极小按钮


<button class="blend-button blend-button-primary blend-button-large">大按钮</button>
<button class="blend-button blend-button-primary blend-button-small">小按钮</button>
<button class="blend-button blend-button-primary blend-button-xs">极小按钮</button>

按钮状态

  • blend-disabled 禁用状态
  • blend-active 激活状态
<button class="blend-button blend-button-primary blend-disabled">禁用状</button>
<button class="blend-button blend-button-primary blend-active">激活状态</button>

圆角按钮

  • blend-round 圆角按钮
  • blend-radius 半圆角按钮
<button class="blend-button blend-button-primary blend-round">圆角按钮</button>
<button class="blend-button blend-button-primary blend-radius">半圆角按钮</button>

链接按钮

  • blend-button-link
<button class="blend-button blend-button-primary blend-button-link">圆角按钮</button>

选择按钮

  • blend-button-default 默认色
  • blend-button-ltgray 浅灰色

默认色

<div data-blend-widget="checkbox" data-blend-checkbox='{"type":"radio","values":["button1","button2"],"itemSelector":".blend-button","itemSelected":"blend-button-checkbox-checked"}'>
    <button class="blend-button blend-button-default blend-button-checkbox">nocheck</button>
    <button class="blend-button blend-button-default blend-button-checkbox blend-button-checkbox-checked">checked</button>
</div>

浅灰色

<div data-blend-widget="checkbox" data-blend-checkbox='{"type":"radio","values":["button1","button2"],"itemSelector":".blend-button","itemSelected":"blend-button-checkbox-checked"}'>
    <button class="blend-button blend-button-ltgray blend-button-checkbox">nocheck</button>
    <button class="blend-button blend-button-ltgray blend-button-checkbox blend-button-checkbox-checked">checked</button>
</div>