专为 Rails 设计的前端模块化框架

标准按钮

带有 class="button" 的链接和按钮会被渲染成 Tao UI 默认按钮的样式,例如:

<button class="button">普通按钮</button>
<button class="button" disabled>普通按钮</button>

Tao UI 还预置了其他常用类型的按钮样式,比如:

<button class="button button-warning">警告按钮</button>
<button class="button button-warning" disabled>警告按钮</button>
<button class="button button-primary">主要按钮</button>
<button class="button button-primary" disabled>主要按钮</button>

小号按钮

所有类型的按钮都支持小号的样式,只需要添加一个 button-small 的 class:

<button class="button button-small">小号按钮</button>
<button class="button button-warning button-small">小号警告按钮</button>
<button class="button button-primary button-small">小号主要按钮</button>

图标按钮

Tao UI 支持只包含图标的按钮,这是一种特殊的按钮类型:

<button class="button button-icon">
  <%= tao_icon :more %>
</button>

如果想在按钮文案前面添加图标,需要给按钮增加一个 class text-with-icon,例如

<button class="button text-with-icon">
  <%= tao_icon :menu %>普通按钮
</button>
<button class="button text-with-icon" disabled>
  <%= tao_icon :loading, class: 'spin' %>普通按钮
</button>

块级按钮

如果想让按钮撑满整行,那么需要给按钮增加 class button-block,例如:

<button class="button button-block">块级按钮</button>
<button class="button button-primary button-block">块级按钮</button>
<button class="button button-warning button-block">块级按钮</button>
<button disabled class="button button-block">块级按钮</button>



自定义

Tao UI的按钮提供了一些可供自定义的 Sass 变量 ,在 _custom.scss 里覆盖这些变量可以自定义按钮的默认样式。

Tao UI 还提供了一个 Sass mixin button-colors,使用这个 mixin 可以方便的增加新的按钮类型,比如:

.button.button-secondary {
  @include button-colors((
    normal: (
      bg: $white-color,
      text: $light-grey-color,
      border: transparent
    ),
    hover: (
      bg: $white-color,
      text: $light-grey-color,
      border: $light-border-color
    ),
    active: (
      bg: $white-color,
      text: $grey-color,
      border: $border-color
    ),
    disable: (
      bg: $white-color,
      text: $lightest-grey-color,
      border: $lighter-line-color
    )
  ));
}