Ratchet教程:Badge组件

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。

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

download

什么是Badges组件

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

Ratchet教程:Badge和Button组件

当然不同的项目会有不同的“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-primarybadge-positivebadeg-negative设置了多种颜色的“badge”。如官网所示:

Ratchet教程:Badge和Button组件

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和Button组件

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

Ratchet教程:Badge和Button组件

根据上图所示,设计中的“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文件之前,你刷新浏览器将看到效果如下:

Ratchet教程:Badge和Button组件 先来修改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编译器,保存文件,在浏览器刷新,你将看到下面的效果:

Ratchet教程:Badge和Button组件

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

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

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

Ratchet教程:Badge和Button组件

如此简单,我们就搞定了两种所需要的“badge”状态效果,现在需要的是颜色风格。不知道大家是否还记得,在前面有简单介绍过,Ratchet框架中,除了默认的灰底效果之外,其他颜色风格是通过类名badge-primarybadge-positivebadeg-negative来控制。但对比于我们设计的需求,还是不够满足我们的需求,那么在此基础上,继续增加几个新的类名来控制其他的颜色风格。在这个示例中,我添加了类名:badge-errorbadge-infobadeg-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;

如图所示:

Ratchet教程:Badge和Button组件

接下来要修改的是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>

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

Ratchet教程:Badge和Button组件Ratchet教程:Badge和Button组件

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

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

刷新浏览器,你将看到默认的效果:

Ratchet教程:Badge和Button组件 用浏览器调试工具,我们很容易查出,icon字号太大了,所以只需要重置"badge"下.iconfont-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;
  }
}

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

Ratchet教程:Badge和Button组件

效果你满意?是不是还想验证一下其他情形下带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和Button组件 好极了!其实到这,有关于Ratchet框架中的“badge”组件的应用与覆盖就算是完了。当然,这里演示只是起一个说明作用,真正还是需要根据自己的需求去制作或者覆盖。

总结

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

待续...

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

download

如需转载,烦请注明出处:http://www.w3cplus.com/mobile/create-badges-with-ratchet.html

返回顶部