按钮颜色类的语义含义

Question

Zurb Foundation定义了几个按钮颜色类:默认情况下,成功,二级,警报信息,禁用

不幸的是，没有关于在应用程序中在哪里使用哪些类的最佳实践指南。

让我困扰的是，默认按钮的颜色很突出。所以我的应用程序中的所有按钮看起来都很重要。

另一方面，表单的提交按钮的最佳类是什么?它应该是默认按钮吗，因为提交是默认操作?然后，我需要为所有其他按钮添加"secondary"类，以使提交按钮脱颖而出。

但是我不喜欢到处添加"secondary"类。

我错过了什么吗?有人有关于基础类使用的最佳实践例子吗?

Answer 1

Default采用原色(SCSS文件中的$primary-color)， secondary采用$secondary-color。这是因为你改变了原色，他们才更突出。

它们在这里定义(这些是默认值):

$primary-color: #008CBA;
$secondary-color: #e7e7e7;
$alert-color: #f04124;
$success-color: #43AC6A;
$warning-color: #f08a24;
$info-color: #a0d3e8;

你可以用SCSS创建你自己的按钮颜色/类。

.custom-button-class {
  @include button(
    // $padding - Used to build padding for buttons Default: $button-med or rem-calc(12)
    $padding,
    // Background color. We can set $bg:false for a transparent background. Default: $primary-color.
    $bg,
    // If true, set to button radius which is $global-radius or explicitly set radius amount in px (ex. $radius:10px). Default:false.
    $radius,
    // We can set $full-width:true to remove side padding extend width. Default:false
    $full-width,
    // We can set $disabled:true to create a disabled transparent button. Default:false
    $disabled
  );
}