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

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

在《Ratchet教程:构建自己的顶部Bar》一文中详细介绍了如何依赖于Ratchet框架,构建属于自己的顶部Bar。在上一篇文章中说过,Ratchet框架除了顶部Bar之外,还有底部Bar和标准Bar。在实际开发中,也常常需要制作底部Bar。在这篇文章中,我们依旧借助Ratchet框架,构建一个自己需要的底部Bar。比如下图中的第一个设计风格:

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

download

在这篇教程中,主要会以四个示例为基础向大家介绍四种不同的底部Bar风格:

  • 带有图标与文本
  • 带有按钮
  • 仅带有图标
  • 仅有文本

先来看第一种。

带图标与文本的Bar

构建HTML

首先需要一个.html文件,这个效果,我们在上一教程的index.html中继续操作。通过前面教程的学习与了解,在Ratchet框架中,制作底部Bar,都会有类名.bar.bar-tab。另外还有一个原则可别忘了,固定的Bar所有结构都应放置在.content之前哟。

<nav class="bar bar-tab">
  <a href="##" class="tab-item">
    <span class="icon icon-home"></span>
    <span class="tab-label">首页</span>
  </a>
  <a href="##" class="tab-item">
    <span class="icon icon-star"></span>
    <span class="tab-label">收藏</span>
  </a>
  <a href="##" class="tab-item active">
    <span class="icon icon-gear"></span>
    <span class="tab-label">设置</span>
  </a>
  <a href="##" class="tab-item">
    <span class="icon icon-download"></span>
    <span class="tab-label">下载</span>
  </a>
  <a href="##" class="tab-item">
    <span class="icon icon-more"></span>
    <span class="tab-label">更多</span>
  </a>
</nav>

这结构其实非常简单,不过我还是多说几句废话吧:

  • 容器: 示例容器使用的是<nav>标签,当然你也可以根据你自己的习惯更换成其他的HTML标签元素,比如说<footer>。这是一个容器,将底部Bar每个功能清单都放在这个容器之内。需要注意的是一定要给这个容器添加类名.bar.bar-tab
  • 功能项:在底部Bar我们有多个功能项,而每个功能项使用的都是<a>标签,并且给其一个定义一个类名.tab-item。在多个功能项目中,为了突显哪个功能项是当前状态,在.tab-item基础上追加一个.active类名。比如示例中的“设置”
  • 图标:每个功能项目在此示例都具有两个部分,第一个部分是图标,第二部分是文本。在此图标使用的是<span>标签,并且定义公用类名.icon,然后在此基础上为不同的icon,追加不同的类名。
  • 文本:刚才说了,每个功能项目包括两个部分,除了图标还有文本。在示例中使用的是<span>标签来放置文本,并且给其定义了一个类名tab-label

当然,你或许会说,我的设计不一定都同时具有图标和文本。比如说,我的只有图标,或者说我的只有文本。说实在的,这些都不是难事,具体情况具体分析。你可以在前面的基础上进行修改。先不纠结这个,我们刷新浏览器,将会看到这样的效果:

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

与设计图对比一下,其实默认的效果离设计已不太远了。接下来通过修改样式来达到我们需要的设计效果。

调试样式

现在功能项的文本颜色不是我们需要的,而且当前状态也离设计相差甚远。很明显,Ratchet框架默认样式不是我们需要的,我们可以通过浏览器调试工具,很快的定位到问题所在。比如说,文本颜色:

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

我想,这样的调试方法,是前端的人应该都懂得吧。

修改bars.scss

在Ratchet框架中,有关于Bar相关的样式,基本上都是放置在bars.scss文件之中,如此一来,给我们最大的方便之处就是我不需要花太多的时间,就能找到我需要的代码。我们一起来看,在bars.scss文件中,能看到这样的一段代码:

.bar-tab {
  display: table;
  bottom: 0;
  width: 100%;
  height: $bar-tab-height;
  padding: 0;
  table-layout: fixed;
  border-top: $border-default;
  border-bottom: 0;

  // Navigational tab (Nested to be more specific for the icons in tab-items)
  .tab-item {
    display: table-cell;
    width: 1%;
    height: $bar-tab-height;
    color: #929292;
    text-align: center;
    vertical-align: middle;

    // Active states for the tab bar
    &.active,
    &:active {
      color: $primary-color;
    }

    // Tab icon
    .icon {
      top: 3px;
      width: 24px;
      height: 24px;
      padding-top: 0;
      padding-bottom: 0;

      // Make the text smaller if it's used with an icon
      ~ .tab-label {
        display: block;
        font-size: 11px;
      }
    }
  }
}

这是一段SCSS代码,根据在浏览器中调试得知,我们文本颜色是通过.tab-item来控制的。那么我们只需要将代码中的#929292置换成所需的#fff(也就是$default-color)。

.bar-tab {
  ...

  .tab-item {
    ...

    color: $default-color;

    ...
  }
}

修改保存你的bars.scss文件,并且注意你的命令终端已开启了Sass的编译。这个时候你只需要刷你的浏览器,你将看到下图的效果:

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

看到上图的效果,说明你修改已成功一半。对比一下设计图,我们还差一个当前端的效果。刚才在bars.scss文件中,我们有看到一个:

// Active states for the tab bar
&.active,
&:active {
  color: $primary-color;
}

其实找到这个,你的问题也就解决了,Ratchet框架默认状态只是修改了颜色,而没有修改背景色。而且这当前颜色也不是我们所需要的。所以一并给他修改了:

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

注意:为了让顶部Bar中icon背景色与底部Bar当前状态背景色配合一致,同时也将.icon-list.icon-search的背景色用变量与函数来控制:

.icon-list,
.icon-search  {
  padding: 3px 10px;
  background-color: darken($primary-color, 10%);
  border-radius:  20px;
  top: 8px;
}

此时你将看到与设计图一样的效果:

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

有时会碰到图标在左,文本在右的效果。这种效果在Ratchet的底部Bar中很容易实现。用浏览器调试工具,我们可以看到.tabl-label有这样一个样式display:block;。这就好办了,禁掉这个就OK了。

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

带有按钮的Bar

HTML

这里就不在具体演示了。我们接下来看第二种情形,底部Bar带有按钮的风格,类似于顶部Bar带按钮的风格。我将这种风格的示例写在page.html文件中。

<footer class="bar bar-tab">
  <button class="btn pull-left">
    <span class="icon icon-left-nav"></span>
    <span class="tab-label">上一篇</span>
  </button>
  <button class="btn pull-right">
    <span class="tab-label">下一篇</span>
    <span class="icon icon-right-nav"></span>
  </button>
</footer>

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

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

调整样式

不知道你是否还记得,在《Ratchet教程:构建自己的顶部Bar》按钮的样式是通过.bar .btn来覆盖的。如果我们接着在这里修改,就一定会影响到其他Bar中.btn的效果。为了避免这种现象,我们得另寻他法。值得幸运的是,在这里有一个新类名.bar-tab。我们可以通过他来控制.bar-tab下的.btn,也正好是我们所需要的。不过有一点需要注意,修改.btn-tab下的.btn样式应该放置在.bar .btn之后。

//Bar Tabs with Buttons
.bar-tab .btn {
  top: 5px;

  &.pull-left {
    margin-left: 10px;
  }
  &.pull-right {
    margin-right: 10px;
  }
}

这个时候你将看到下图效果:

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

总感觉,按钮上的图标与文本不太协调,得想办法让他们协调起来。

.bar-tab .btn {
  .icon {
    font-size: 16px;
    top: 1px;
  }
}

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

稍为调整一下按钮的top值,因为我们重置了icon的大小,整个按钮大小略有变化。

//Bar Tabs with Buttons
.bar-tab .btn {
  top: 9px;

  &.pull-left {
    margin-left: 10px;
  }
  &.pull-right {
    margin-right: 10px;
  }
}

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

到这一步,带有按钮的底部Bar看上去也差不多了,不知道是否可以入各位法眼。接下来看第三种,只带图标的Bar。

仅带图标的Bar

这种效果和第一种相比,只是少了文本,做起来应该不会太复杂。我将这个案例写在了send.html文件。

HTML

结合前两者,将结构换成:

<nav class="bar bar-footer">
  <a href="##" class="icon icon-compose pull-left"></a>
  <a href="##" class="icon icon-gear pull-right"></a>
</nav>

来看看效果:

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

可以说是一步到位。跟所需要的效果是一模一样。这样一来,样式都不用调了,是不是觉得非常的爽呀。如果觉得这样爽的不过隐,想换换,也不是不可以的,你可以根据自己的设计进行修改。这里就不深入了。

仅带文本的Bar

这是今天需要介绍的最后一个示例,为了不与前面的示例相冲突,我特意新创建了一个新页面list.html。在这里实现仅带有文本的底部Bar 效果。同样先看结构吧:

<nav class="bar bar-tab">
  <a href="##" class="tab-item active">上一页</a>
  <a href="##" class="tab-item">下一页</a>
  <a href="##" class="tab-item">更多</a>
</nav>

二话先不说,请刷新你的浏览器:

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

绝对是小清新,样式都不用调了。就达到需要的效果,现在是不是觉得Ratchet的强大。心动不如行动。

总结

结合《Ratchet教程:构建自己的顶部Bar》一文介绍的顶部Bar效果,可以讲常用到的Bar都能借助Ratchet框架实现。在Ratchet中除了顶部和底部的Bar,还有一种称为标准的Bar,但这种Bar如何展开,我们后续的实例讲解碰到之后再深入。

在这篇文章中主要介绍了底部Bar的四种效果的制作与覆盖。在现实开发中,这上面的几种效果无法满足项目的需求,但我想只要你了解了,掌握了方法,就不愁制作不出属于自己的Bar。大家是否还记得文章开头提供的设计图,在本文都是实现设计图中样式一。如果你想验证一下自己是不是也掌握了,不仿动手制作设计图中的样式二,我想亲手制作之后,你的收获将会更大。

待续...

有关于Ratchet框架的Bar效果制作,总共花了两章篇幅来介绍,在接下来的一节中,将向大家介绍移动端中有关于列表(也就是Ratchet中"Table Views"功能组件)制作。感兴趣的同学欢迎技术关注本教程的相关更新。如果您有相关的制作经验,欢迎在下面的评论中与我们一起分享。

download

如需转载,烦请注明出处:http://www.w3cplus.com/mobile/custom-bottom-nav-bars-ratchet.html

jordan shoes for sale outlet fashion

如需转载,烦请注明出处:https://www.w3cplus.com/mobile/custom-bottom-nav-bars-ratchet.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部