Ratchet教程:Badge组件
通过Ratchet教程的案例实战一练习之后,我想大家对Ratchet框架有了进一步的了解,或者已经能使用Ratchet框制作一些移动端的页面(也称为H5网站)。其实Ratchet框架中不仅仅包括这些东东,他还具备其他的组件。那么今天我们继续来了解Ratchet框架中的Badges(标签)。
什么是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”组件。希望大家喜欢。
如需转载,烦请注明出处:https://www.fedev.cn/mobile/create-badges-with-ratchet.html
nike air max 90 Classic