Ratchet教程:构建自己的顶部Bar

发布于 大漠

如果你有跟着《Ratchet教程:创建项目》一文走下来,你已成功的完成了使用Ratchet框架构建移动端项目。接下来就是在这个项目中添加自己需要的内容。那么今天我们要做的就是:构建自己的顶部bar

假设你的标题栏有这样几种设计效果:

Ratchet教程:构建自己的标题栏

download

上图是从网上找来的,不总共是几种不同的设计方案,当然在一个项目中不可能使用这么多种不同的色系。接下来的示例中,我将所有效果都拍平了,而且采用第一种色系。同时实现“1、3、4”三种不同的效果。

在开始制作之前,我们回到Ratchet框架中的标题栏组件。在整个标题栏组件中,Ratchet主要包括以下几种:

  • 顶部标题栏
    • 纯标题
    • 带有按钮
    • 带有图标
    • 带有图标与按钮
    • 带切换效果的标题栏
  • 底部标题栏
    • 底部标签卡(带图标)
    • 底部标签卡(纯文本)
    • 标准bar

不管是哪一种bar他们都具有一个共同的特性,他们都在HTML结构中带有一个相同的类名.bar,而且在Ratchet都是固定在顶部或者底部。同时根据Ratchet页面创建原则,这些bar元素都需要放置在.content元素之前。

如此一来,感觉蛮复杂的,其实对于我们来说,没有必要这么纠结,完全可以将其按功能来划分,那么不同功能的bar通过不同的bar-后缀来区别。根据官网组件,将其按功能划会为:

  • 导航:使用.bar-nav
  • tab切换:使用.bar-tab
  • 标准bar:使用.bar-standard,在标准bar里面又通过.bar-header-secondary.bar-footer-secondary来区分顶部和底部的二级标准bar。

我想,这个时候大家应该可以很好的分清楚,不同的bar具有什么样的功能,当然你要按他长得样子分,我想难度就大了。就如上面的设计图所示,“1~6”就有六种了,想想就后怕。在此我们也不纠结这么多了。继续深入前面约定的,实现设计图中“1、3、4”类似的效果。

HTML结构

在结构中,并不在呼你给bar使用什么样的标签元素,而在意的是你使用什么样的类名,因为这些类名直接决定了bar的功能。从官网中我们可以很容易看出:

导航bar

具有导航功能的bar,而且他常常位于顶部,所以常用<header>标签来控制:

<header class="bar bar-nav">
    <!-- 具体内容放在这 -->
</header>

切换卡bar

带有切换功能的bar,就是类似于我们常说的"tabs"选项卡的,他类似于一个菜单,所以常常使用<nav>标签来控制:

<nav class="bar bar-tab">
    <!-- 具体内容放在这 -->
</nav>  

标准bar

标准bar相对前两种稍为多一点。首先他统称为.bar-standard,一般情况默认为顶部的bar,如果你想让其变成底部的bar,需要在原有基础上添加一个类名bar-footer。除此之外,还分二级顶部的标准bar,而且二级标准bar又分为顶部bar-header-secondary和底部bar-footer-secondary。使用的元素标签就没有定论了,官网是这样应用的:

<nav class="bar bar-standard">
    <!-- 具体内容放在这 -->
</nav>  

<div class="bar bar-standard bar-header-secondary">
    <!-- 具体内容放在这 -->
</div>

<div class="bar bar-standard bar-footer-secondary">
    <!-- 具体内容放在这 -->
</div>

<div class="bar bar-standard bar-footer">
    <!-- 具体内容放在这 -->
</div>

不过就我个人而言,我喜欢将bar-footer上的元素标签换成<footer>标签,看上去协调一些:

<footer class="bar bar-standard bar-footer">
    <!-- 具体内容放在这 -->
</footer>

致于里面的实际内容放置是些什么,就需要根据你的设计,或者你的具体项目来定了。

CSS

关于bar的结构,我们了解清楚了,现在需要知道他的样式代码如何?从前面的教程可以得知,Ratchet框架的所有样式代码都放置在ratchet.css中(当然,还有一个压缩版本ratchet.min.css)。那么我们可以在ratchet.css中搜索.bar类名,看到这么一大堆样式代码:

.bar {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 10;
  height: 44px;
  padding-right: 10px;
  padding-left: 10px;
  background-color: white;
  border-bottom: 1px solid #dddddd;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 
}

.bar-header-secondary {
  top: 44px; 
}

.bar-footer {
  bottom: 0; 
}

.bar-footer-secondary {
  bottom: 44px; 
}

.bar-footer-secondary-tab {
  bottom: 50px; 
}

.bar-footer,
.bar-footer-secondary,
.bar-footer-secondary-tab {
  border-top: 1px solid #dddddd;
  border-bottom: 0; 
}

.bar-nav {
  top: 0; 
}

当然,这里截取出来的只是一些关键性的代码,还有关于bar里面的一些内部元素的样式代码,我就不一起扒出来了。也就是说,后面如果我们使用style.css来覆盖ratchet.css中关于bar部分的代码就是以.bar.bar-开头的。想像一下,好像还是蛮复杂的。当然,在实际操作当中,并不一定是每一行代码都必须覆盖,说不定我们只是修改他们的颜色值、字体、字号等等。简单一点的方法,使用浏览器的调试工具还是蛮方便的。找到对应的选择器,覆盖所需要的样式。不过这样一来就无形中增加了代码量,这也是难免的,除非你从头写。那么今天我们就不纠结这个了。请继续往下看吧。

Sass

在Ratchet的源代码中,我们不难发现,他有一个sass的文件目录,里面针对不同的组件有一个独立的.scss文件,例如,今天所说的bar,他就有一个对应的bars.scss文件。这里面是一大串的SCSS代码:

.bar {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 10;
  height: $bar-base-height;
  padding-right: $bar-side-spacing;
  padding-left: $bar-side-spacing;
  background-color: $chrome-color;
  border-bottom: $border-default;
  -webkit-backface-visibility: hidden; // Make sure the bar is visible when a modal animates in.
          backface-visibility: hidden;
}

// Modifier class to dock any bar below .bar-nav
.bar-header-secondary {
  top: $bar-base-height;
}

// Modifier class for footer bars
.bar-footer {
  bottom: 0;
}

// Modifier class to dock any bar above a standard bar
.bar-footer-secondary {
  bottom: $bar-base-height;
}

// Modifier class to dock any bar above a .bar-tab
.bar-footer-secondary-tab {
  bottom: $bar-tab-height;
}

// Give the footers the correct border
.bar-footer,
.bar-footer-secondary,
.bar-footer-secondary-tab {
  border-top: $border-default;
  border-bottom: 0;
}

没有接触过Sass的同学,可能看得会后怕。不过懂的同学,这样的代码就是小菜一碟呀。这个文件将在后面的示例中,会显示出他的强悍。接下来的实战也将是以Sass文件修改为例。还等什么呢?开始吧。

构建自己的Bar

从这一步开始,来实现设计图中"1~4"几中效果。

创建只有标题的Bar

第一步,先在index.html文件中加入所需要的结构,为了更好的向大家展示,我将一步一步来介绍。

我先创建一个结构,这个结构就是只展示了一个光标题,没有任何的图标、按钮。

<header class="bar bar-nav">
  <h1 class="title">W3cplus</h1>
</header>

刷新你的浏览器,你将看到这样的效果:

Ratchet教程:构建自己的标题栏

这显然不是我们需要的,我们要的是以蓝底白字为主。在bars.scss文件中,找到对应的代码:

.bar {
  ...
  background-color: $chrome-color;
  border-bottom: $border-default;
  ...
}

因为我们设计图的背景色是#4396fc,底部边框是#3a84db。根据bars.scss文件中对应的变量$chrome-color$border-default。我们接下来要做的是修改变量文件variables.scss中对应的变量值:

$chrome-color:  #fff !default;
$border-default: 1px solid #ddd !default;

根据设计图,将这两个变量对应的值修改成:

$chrome-color:  #4396fc !default;
$border-default: 1px solid #3a84db !default;

为了验证我们这样操作是不是正确的,在你的命令终端,编译ratchet.scss文件。

sass --watch sass/ratchet.scss:css/ratchet.css

现在刷新浏览器:

Ratchet教程:构建自己的标题栏

有些许的兴奋了。现在标题还不是需要的#fff色。继续努力,在bars.scss文件中有这样的一段代码:

.title {
  position: absolute;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 (-$bar-side-spacing);
  font-size: $font-size-default;
  font-weight: $font-weight;
  line-height: $bar-base-height;
  color: #000;
  text-align: center;
  white-space: nowrap;
}

非常简单,把里面的color:#000;换成color:#fff;即可。

Ratchet教程:构建自己的标题栏

非常完美,表示我们第一步大功告成。

给标题添加Icon

对于首页的bar,我们常看到的设计效果类似于设计图中的“4”。左边表示菜单图标,右边表示搜索表单。那继续在结构中添加所需要的图标:

<header class="bar bar-nav">
  <a href="##" class="icon icon-list pull-left"></a>
  <a href="" class="icon icon-search pull-right"></a>
  <h1 class="title">W3cplus</h1>
</header>

为了偷懒,我直接使用了Ratchet框架自带的icon。当然很多时候没有那么幸运,你的设计中用到的图标,在Ratchet框架图标中不具备,这个时候不得不使用自己的,那么我建议你使用一个属于自己的命名规则,以来区分框架自带的。比如:

<a href="##" class="icon icon-w3c-list pull-left"></a>

这个时候你一样可以看到这样的效果:

Ratchet教程:构建自己的标题栏

图标虽然出来了,但离设计相差甚远。需要我们继续努力。图标是白色的,并且带有深蓝色的背景。按前面的方法,在bars.scss继续添加代码。不过这里有一点不一样,因为这两个图标.icon-list.icon-search有可能将会在别的地方使用,所以我们只能在.bar范围内添加:

.bar {
  .icon-list,
  .icon-search  {
    padding: 3px 10px;
    background-color: #3a84db;
    border-radius:  20px;
    top: 8px;
    color: #fff;
  }
}

效果如下:

Ratchet教程:构建自己的标题栏

到这里,就实现了所需要的Bar效果。

实现带有按钮和图标的bar

前面实现了首页上的Bar效果,但内页头部的bar展示的风格并不像这样,大家常看到的会如设计图中效果“1”所示。这个效果对应的就是Ratchet框架上带有按钮的bar。为了不与前面的效果所冲突,咱先copy出一个新页面“page.html”。

首先在page.html中添加我们所需要的结构:

<header class="bar bar-nav">
  <button class="btn btn-link btn-nav pull-left"><span class="icon icon-left-nav"></span>返回</button>
  <a href="##" class="icon icon-gear pull-right"></a>
  <h1 class="title">Ratchet系列教程</h1>
</header>

默认效果:

Ratchet教程:构建自己的标题栏

结合下来,我们发现顶部bar的icon的颜色都是#fff;。前面的做法是给.bar下面的.icon-list.icon-search设置了color:#fff;(由于icon是字体文件生成的,用color解决颜色问题,你懂的)。如此看来,我们这样并不是好的方案,既然我们的bar是蓝底,图标都是白色,为了不要每次修改icon的颜色,我们直接在.bar中添加一个color:#fff;

.bar {
  .icon {
    ...
    color: #fff;
  }
  ...
}  

此时icon的颜色变成我们所需要的颜色了。

Ratchet教程:构建自己的标题栏

非常接近我们的设计图了。继续使用调试工具,不难发现,.btn-link的颜色,我们需要重置一下。在bars.scss中可以找到:

.bar .btn-link {
  top: 0;
  padding: 0;
  font-size: 16px;
  line-height: $bar-base-height;
  color: $primary-color;
  border: 0;

  &:active,
  &.active {
    color: darken($primary-color, 10%);
  }
}

这里颜色调用了变量$primary-color,其对应的颜色值是#428bca。我们在variables.scss文件中,找到了一个对应白色颜色的变量:

$default-color:  #fff !default;

这下好办了,替换一下就OK。就算没有也不怕,只需要在variables.scss文件中添加一个新的变量,我们修改之后:

.bar .btn-link {
  ...
  color: $default-color;

  &:active,
  &.active {
    color: darken($default-color, 10%);
  }
}

Ratchet教程:构建自己的标题栏

OK!效果完成了。是不是觉得并不是太复杂的一件事情了。别停,我们继续,还有一个效果。

带按钮的bar

还有一种情况,顶部bar带有button。比如设计图中的第四种效果。这种效果在Ratchet框架中也有现成的——带按钮的bar。同样,我们重新创建一个新页面send.html。复制所需代码进去:

<header class="bar bar-nav">
  <button class="btn pull-left">返回</button>
  <button class="btn pull-right">完成</button>
  <h1 class="title">申请发布</h1>
</header>

刷新浏览器,你将看到下图的效果:

Ratchet教程:构建自己的标题栏

怎么操作,我想不需要具体说了,直接bars.scss看代码,修改代码:

.bar .btn {
  ...
  //覆盖bars中的button
  color: #fff;
  border-color: darken($chrome-color, 20%);
  @include box-shadow(0,0,0,.3);
  @include linear-gradient(lighten($chrome-color, 5%),darken($chrome-color, 10%));
  ....
}

Ratchet教程:构建自己的标题栏

跟想像中需要的效果是一样的。但你是否注意到,前面page.html中也有一个.btn,也是属于.bar中的。如此一来会不会冲突呢?赶紧看看:

Ratchet教程:构建自己的标题栏Ratchet教程:构建自己的标题栏

莫急,回到前面的.btn-link,相比之下,多了背景,多了阴影。找到原因就好办,重新修改一下.btn-link

.bar .btn-link {
  ....

  //覆盖button的样式
  @include box-shadow(none);
  background: transparent;

  ....
}

验证一下:

Ratchet教程:构建自己的标题栏

这下可算是完美了。

待续...

Ratchet框架中bar的效果还有其他的,如果在这一节内容中要全部介绍完,目测一下篇幅会很长。所以暂时打住,将其他的部分移到下一节中介绍。下一节将向大家介绍,如何构建自己的底部bar效果。希望大家喜欢。

总结

在这一节中,通过具体的实例,介绍了如何借助于Ratchet框架构建属于自己的顶部Bar。可以说实战性强,当然对于不了解Sass的同学来说,其中也略有一定的难度,因为自定义自己设计风格的修改并不是在style.css中添加样式来覆盖ratchet.css,而是直接通过Ratchet提供的Sass文件进行修改。其实整个过程还是蛮有意思的,你不仿自己动手试试。

download

如需转载,烦请注明出处:https://www.fedev.cn/mobile/custom-top-nav-bars-ratchet.html

nike air max 1 trends