Ratchet教程：Badge组件

通过Ratchet教程的案例实战一练习之后，我想大家对Ratchet框架有了进一步的了解，或者已经能使用Ratchet框制作一些移动端的页面（也称为H5网站）。其实Ratchet框架中不仅仅包括这些东东，他还具备其他的组件。那么今天我们继续来了解Ratchet框架中的Badges(标签)。

download

什么是Badges组件

先简单的来了解一下Badge是什么东西？直译出来就是“徽章”的意思。在我们Web页面中可以理解是标签，带有一定的提示意思。简单的来看一个示意思图：

当然不同的项目会有不同的“Badge”，我们就不纠结这些东东，我们要关注的是在Ratchet框架中是制作“Badges”，类似上图那样的。

Badges组件的HTML

回到Ratchet框架中来，在Ratchet框架中，其“badges”使用了类名为.badge的<span>标签：

<span class="badge">1</span>
<span class="badge badge-primary">2</span>
<span class="badge badge-positive">3</span>
<span class="badge badge-negative">4</span>

<span class="badge badge-inverted">1</span>
<span class="badge badge-primary badge-inverted">2</span>
<span class="badge badge-positive badge-inverted">3</span>
<span class="badge badge-negative badge-inverted">4</span>

当然，是不是使用<span>标签，并不是非常重要，你可以具体项目具体分析，或者说，你喜欢使用<i>这样的标签元素也是无仿的。在这里比较重要的是类名的使用。简单点说，你的标签设置了类名badge，那么意味着你是要制作“badge”效果。

在Ratchet框架中提供了两种“badge”风格，其中默认的是添加类名.badge这种，即灰底黑字椭圆形徽章。当你在.badge基础上添加.badge-inverted类名时，“badge”会呈现第二种风格，也就是没有背景色，也不具有图形效果。同时在Ratchet框架中，为了让“badge”适配多种需求，还通过类名：badge-primary、badge-positive和badeg-negative设置了多种颜色的“badge”。如官网所示：

Badge组件的样式

了解清楚Ratchet框架中有关于“badge”结构之后，我们需要了解其CSS。只有这样我们才能更好的覆盖默认的样式风格，实现自己需要的风格（很多时候，默认的风格不是我们需要的）。比如教程最开始的设计图所示，默认的是无法达到我们设计需求的，此时需要自己去覆盖。

或许有人会说，要覆盖还不如自己去写呢？这不是自己给自己找麻烦吗？似乎说得有几分道理，但Ratchet框架能帮助我们解决更多的事情。相比之下，覆盖一点代码也是划算的，而且覆盖并不是件复杂的事情。

和前面教程所介绍的一样，在Ratchet框架中，其为“badge”提供了一个专门的SCSS文件badges.scss。我们所要做的就是在这里添加或修改原有的SCSS代码。

在编辑器中，你将看到关于“badge”的SCSS代码：

.badge {
  display: inline-block;
  padding: 2px 9px 3px;
  font-size: 12px;
  line-height: 1;
  color: #333;
  background-color: rgba(0,0,0,.15);
  border-radius: 100px;

  // Inverted badges have no background.
  &.badge-inverted {
    padding: 0 5px 0 0;
    background-color: transparent;
  }
}


// Badge modifiers
// --------------------------------------------------

// Main badge
.badge-primary {
  color: #fff;
  background-color: $primary-color;

  &.badge-inverted {
    color: $primary-color;
  }
}

// Positive badge
.badge-positive {
  color: #fff;
  background-color: $positive-color;

  &.badge-inverted {
    color: $positive-color;
  }
}

// Negative badge
.badge-negative {
  color: #fff;
  background-color: $negative-color;

  &.badge-inverted {
    color: $negative-color;
  }
}

Badge组件样式覆盖

懂SCSS代码的同学，上面的代码并不复杂。大家或许更关心的是，我要怎么覆盖或者说修改上面的代码呢？接下来，我们用一个简单的实例来说这个问题。假设我们的项目，有这样的一些“badge”效果：

我们先不用急着去写代码，把我们要的效果与Ratchet框架提供的“badge”效果对比一下，如：

根据上图所示，设计中的“badge”和Ratchet框架中的"badge"有以下几个不同处之处：

• 形状：设计中的"badge"是直角，而Ratchet框架中的“badge”是圆角。
• 颜色：设计中的“badge”有七种颜色（或许你的设计中会更多），而Ratchet框架中的“badge”只有四种颜色。
• 反色（badge-inverted）：设计中的“.badge-inverted”是带有边框的，而Ratchet框架中的"badge-inverted"是没有边框，只有文本色
• 带有icon：设计中有的“badge”带有icon，而Ratchet框架中是没有带icon。

了解了这些，我们就可以对症下药了。

• 形状：去掉Ratchet框架中“badge”的圆角样式，就变成了设计中的直角风格。
• 颜色：Ratchet框架中为“badge”提供了四种不同状态下的颜色风格，为了实现设计效果，只需要覆盖默认的四种颜色，另外补上框架中不具有的其他颜色。
• 反色（badge-inverted）：Ratchet框架中的.badge-inverted是不具有边框效果，而设计有边框，为了达到设计需求，只需要在此添加边框风格，并将其他样式做一定的处理。
• 带有icon：这个其实好办，我们只需要按照Ratchet框架中icon实现原理，将其运用在“badge”组件上即可。

接下来，我们就可以动手了，先来实现默认的“badge”效果。（为了更好的演示“badge”效果，我在项目中添加了一个badge.html文件）。根据前面所言，将制作“badge”的结构添加到新创建的badge.html文件中：

<div class="content">
  <div class="card">
    <ul class="table-view">
      <li class="table-view-cell table-view-divider">默认Badge风格</li>
      <li class="table-view-cell">默认Badge<span class="badge">制作徽章</span></li>
    </ul>
  </div>
</div>

其实我们不用太关注其他代码，为了让样子更好看，我制作成列表的效果，我们其实要关注的“badge”结构是：

<span class="badge">制作徽章</span>  

在没有修改badges.scss文件之前，你刷新浏览器将看到效果如下：

先来修改badges.scss中.badge和.badge-inverted中的样式：

.badge {
  display: inline-block;
  padding: 2px 5px 2px;
  font-size: 12px;
  line-height: 1;
  color: $default-color;
  background-color: $badge-default;
  border: 1px solid $badge-default;

  &.badge-inverted {
    background-color: transparent;
    color: #000;
  }
}

为了更好的管理badges.scss文件中用到的变量，我在variables.scss文件中添加了所需要的变量值：

//badges
$badge-default: #999 !default;

开启你的Sass编译器，保存文件，在浏览器刷新，你将看到下面的效果：

上面我们把.badge-inverted的默认效果一并处理了，如果在实际应用中需要使用默认的反转效果，只需要在原结构的基础上添加类名.badge-inverted:

<span class="badge badge-inverted">制作徽章</span>

保存修改的文件，你这个时候在浏览器能看到默认的反转的“badge”效果：

如此简单，我们就搞定了两种所需要的“badge”状态效果，现在需要的是颜色风格。不知道大家是否还记得，在前面有简单介绍过，Ratchet框架中，除了默认的灰底效果之外，其他颜色风格是通过类名badge-primary、badge-positive和badeg-negative来控制。但对比于我们设计的需求，还是不够满足我们的需求，那么在此基础上，继续增加几个新的类名来控制其他的颜色风格。在这个示例中，我添加了类名：badge-error、badge-info和badeg-success。为了更好的控制他们的颜色，我同样在variables.scss文件中添加了六种变量：

//badges
$badge-default: #999 !default;
$badge-primary:#004CCF !default;
$badge-positive:#F56900 !default;
$badge-negative:#A655CB !default;
$badge-error:#F33024 !default;
$badge-info:#4CCCD9 !default;
$badge-success:#84BA00 !default;

如图所示：

接下来要修改的是badges.scss中的代码了：

// Main badge
.badge-primary {
  background-color: $badge-primary;
  border-color: $badge-primary;

  &.badge-inverted {
    color: $badge-primary;
  }
}

// Positive badge
.badge-positive {
  background-color: $badge-positive;
  border-color:$badge-positive;

  &.badge-inverted {
    color: $badge-positive;
  }
}

// Negative badge
.badge-negative {
  background-color: $badge-negative;
  border-color: $badge-negative;

  &.badge-inverted {
    color: $badge-negative;
  }
}

//Error badge
.badge-error {
  background-color: $badge-error;
  border-color: $badge-error;

  &.badge-inverted {
    color: $badge-error;
  }
}

//Info badge
.badge-info {
  background-color: $badge-info;
  border-color: $badge-info;

  &.badge-inverted {
    color: $badge-info;
  }
}

//Success badge
.badge-success {
  background-color: $badge-success;
  border-color: $badge-success;

  &.badge-inverted {
    color: $badge-success;
  }
}

你可能还在想，我修改的效果有没有成功，其实验证非常的简单，在你的结构中添加相应的代码：

<span class="badge badge-primary">制作徽章</span>
<span class="badge badge-positive">制作徽章</span>
...
<span class="badge badge-info badge-inverted">制作徽章</span>
<span class="badge badge-success badge-inverted">制作徽章</span>

其它对应的颜色，你只要按照上面的方式添加对应的类名，保存你所修改的样式文件，并刷新你的浏览器，你将看到下面的效果：

是不是放心了。如果放心了，那就好办了，现在我们继续纠结有icon的“badge”怎么来制作。先按照Ratchet框架中icon使用的示例，在"badge"结构中添加带有<span class="icon icon-*">的HTML：

<span class="icon icon-person"></span>制作徽章</span>

刷新浏览器，你将看到默认的效果：

用浏览器调试工具，我们很容易查出，icon字号太大了，所以只需要重置"badge"下.icon的font-size就可以调整，使其风格接近于我们设计所需要：

.badge {
  display: inline-block;
  padding: 2px 5px 2px;
  font-size: 12px;
  line-height: 1;
  color: $default-color;
  background-color: $badge-default;
  border: 1px solid $badge-default;
  // Inverted badges have no background.
  &.badge-inverted {
    background-color: transparent;
    color: #000;
  }
  > .icon {
    font-size:14px;
    margin-right: 5px;
  }
}

保存修改的文件，刷新浏览器，你将看到的效果如下图所示：

效果你满意？是不是还想验证一下其他情形下带icon的效果呀。很简单，在结构中添加需要的：

<span class="badge badge-success"><span class="icon icon-person"></span>制作徽章</span>
...
<span class="badge badge-success badge-inverted"><span class="icon icon-person"></span>制作徽章</span>

效果如下：

好极了！其实到这，有关于Ratchet框架中的“badge”组件的应用与覆盖就算是完了。当然，这里演示只是起一个说明作用，真正还是需要根据自己的需求去制作或者覆盖。

总结

在这一节中，主要针对Ratchet框架中的“badge”组件进行了介绍。如果你仔细阅读完这篇文章之后，你将对Ratchet框架中的“badge”组件有一个深入的了解。换句话说，你可以轻松自如的运用Ratchet框架的“badge”组件，甚至你可以根据自己的需求，去重新定义新的“badge”风格，来满足项目需求，而且不会生成冗余无用的代码。要是不信，你不仿一试。

待续...

如果你对Ratchet系列教程感兴趣的话，欢迎持续观注后续的相关更新，在接下来的一节中，主要和大家一起探讨Ratchet框架中的“Buttons”组件。希望大家喜欢。

download

如需转载，烦请注明出处：https://www.fedev.cn/mobile/create-badges-with-ratchet.html

nike air max 90 Classic