Ratchet教程:自定义列表

发布于 大漠

我把Ratchet框架组件中的“Table Views”称为列表。实在找不出更易理解与形象的词语,当然你也可以直接将其称为“Table Views”。我们就不纠结这个了。那么从这一节开始,我想和大家一起探讨Ratchet框架中的列表制作。当然是构建适合自己的列表。

download

在正式介绍这个组件之前,我们先来回忆《Ratchet教程:自动化部署与组件概览》一文。@文彬根据官网列出Ratchet框架中关于列表功能主要分为以下几种:

  • 列表:纯文本的清单
  • 带箭头的列表:在前一种列表的基础上,在右侧添加了一个向右的箭头
  • 带消息提示的列表:列表项的右侧有一个消息提示
  • 带消息提示和箭头的列表:这个效果结合了第二个和第三个列表特征
  • 带图片的列表:这个效果最常见了,列表项左侧是一张图片,图片右侧有一个标题和一段描述性文本
  • 带图标的列表:每个列表项前面有一个图标
  • 带按钮的列表:每个列表项右侧带有一个按钮
  • 带开关按钮的列表:每个列表项右侧带有一个开关按钮
  • 卡片式列表

看上去蛮复杂的,其实也并不是那么难,这些效果也是大家常见的。从这一节开始,我将分几节内容一一向大家道来,分享一下我自己是如何根据Ratchet框架构建这些列表组件。希望对大家有所帮助。

寻找设计图

寻找设计图是一件苦逼的事情(谁叫哥不是射鸡湿出身),原本想用自己做过的项目来为例子展开,但怕说我泄密,后怕之下我又给打住了。还好在有互联网,我在Mobiel Patterns上找了一每设计图:

Ratchet教程:自定义列表

特别声明:上面设计图来自于Mobiel Patterns网站。

看了一下,这张设计图还是蛮适合将要介绍的内容,虽然没有涵盖所有列表功能,但最起码涵盖了三分之一吧。接下来,我们就一步一步来完成设计图上所展示的列表效果。(头部效果和底部效果我们在前面的示例基础之上不做任何修改)。

首先创建一个HTML页面,在本例中直接将列表效果写在page.html中。在Ratchet官网组件中,提供了各种列表的结构,我们先拿最简单的那种:

<ul class="table-view">
    <li class="table-view-cell">Item 1</li>
    <li class="table-view-cell">Item 2</li>
    <li class="table-view-divider">Divider</li>
    <li class="table-view-cell">Item 3</li>
</ul>

不知道大家是否还记得,使用Ratchet制作页面,页面的主内容都需要放在一个.content容器之内。这是其原则之一,而且这个标签需要放在所有固定Bar之后。有关于这方面的详细介绍,大家可以阅读《Ratchet教程:创建项目》一文。这样一来,我们的结构变成:

<div class="content">
  <ul class="table-view">
    <li class="table-view-cell">Item 1</li>
    <li class="table-view-cell">Item 2</li>
    <li class="table-view-divider">Divider</li>
    <li class="table-view-cell">Item 3</li>
  </ul>
</div>

你将看到这样的效果:

Ratchet教程:自定义列表

整个列表命名为.table-view,每个列表项定义了类名.table-view-cell,其中分隔块定义了类名.table-view-divider。结构简单明了,根据我们的设计图,将分隔项调到上面,我将分隔项之下的称为一个类别,并将内容换成自己需要的。调整后的结构如下:

<div class="content">
  <ul class="table-view">
    <li class="table-view-divider">CSS3教程</li>
    <li class="table-view-cell">圆角border-radius</li>
    <li class="table-view-cell">渐变gradient</li>
    <li class="table-view-cell">盒子阴影box-shadow</li>
    <li class="table-view-divider">响应式设计</li>
    <li class="table-view-cell">CSS3 Media Queries</li>
    <li class="table-view-cell">图片自适应</li>
    <li class="table-view-cell">缩放排版</li>
    <li class="table-view-divider">Ratchet教程</li>
    <li class="table-view-cell">Ratchet安装</li>
    <li class="table-view-cell">Ratchet组件</li>
    <li class="table-view-cell">Ratchet创建项目</li>
  </ul>
</div>

Ratchet教程:自定义列表

效果更接近设计图。我们暂时抛开顶部带图片的列表,只观注下面的列表项。上图的分隔线是蓝色的,但我们需要的是灰色的。那先把这个解决了。

同样我们通过Sass文件来覆盖。在Ratchet框架中,列表组件和Bar组件类似,有一个专有的.scss文件叫table-views.scss文件。接下来关于样式的修复,我们大部分都是在这个文件中修改。

table-views.scss文件中,我们可以找到:

.table-view {
  ...
  border-top: $border-default;
  border-bottom: $border-default;
}


.table-view-cell {
  ...
  border-bottom: $border-default;
  ...
}

.table-view-divider {
  ...
  border-top: $border-default;
  border-bottom: $border-default;
}

.table-view.table-view-cell.table-view-divider中关于border的样式都调用了变量$border-default。通过在variables.scss文件中,可以看到$border-default定义了这样的一个值:

$border-default: 1px solid #3a84db !default;

现在要将边框线由蓝色变成灰色,修改变量$border-default是最方便的,但是这样一来就会影响别的地方的边框效果,比如Bar上的。那么我们要么在table-views.scss一个一个修改,要么重新定义一个新的变量,比如$border-table-views。我个人更趋向于定义一个变量:

$border-table-views: 1px solid #e1e4e5 !default;

然后将table-views.scss文件中.table-view.table-view-cell.table-view-divider用到的$border-default变量置换成新定义的变量$border-table-views

.table-view {
  ...
  border-top: $border-table-views;
  border-bottom: $border-table-views;
}


.table-view-cell {
  ...
  border-bottom: $border-table-views;

  ...
}

.table-view-divider {
  ...
  border-top: $border-table-views;
  border-bottom: $border-table-views;
}

接着将分隔块背景色换成#f2f4f5,同时修改font-size等属性:

.table-view-divider {
  ...
  color: #94999c;
  font-size: 12px;
  background-color: #fafafa;
  ...
}

刷新浏览器:

Ratchet教程:自定义列表

基本雏形已来了,不过我们还要继续努力。接下来给每个列表项添加向右的箭头。根据Ratchet组件示例,需要给每个列表项添加一个<a>标签,并且定义一个类名.navigate-right:

<div class="content">
  <ul class="table-view">
    <li class="table-view-divider">CSS3教程</li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">圆角border-radius</a>
    </li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">渐变gradient</a>
    </li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">盒子阴影box-shadow</a>
    </li>
    <li class="table-view-divider">响应式设计</li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">CSS3 Media Queries</a>
    </li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">图片自适应</a>
    </li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">缩放排版</a>
    </li>
    <li class="table-view-divider">Ratchet教程</li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">Ratchet安装</a>
    </li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">Ratchet组件</a>
    </li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">Ratchet创建项目</a>
    </li>
  </ul>
</div>

保存你的文件,并刷新浏览器:

Ratchet教程:自定义列表

效果显示与提供的设计几乎接近,在此就不做过多的阐述。设计图在每个列表后面有一个对应的使用数据或者说收集数据吧。在我们的示例中,我想将每篇文章的阅读数据展示出来。这样正好与Ratchet框架中的带消息提示和箭头的列表相似。根据官方提供的结构,我们只需要在列表项目中添加一个<span class="badge"></span>即可:

<div class="content">
  <ul class="table-view">
    <li class="table-view-divider">CSS3教程</li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">圆角border-radius <span class="badge">10989</span></a>
    </li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">渐变gradient <span class="badge">23908</span></a>
    </li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">盒子阴影box-shadow <span class="badge">1249</span></a>
    </li>
    <li class="table-view-divider">响应式设计</li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">CSS3 Media Queries <span class="badge">8976</span></a>
    </li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">图片自适应 <span class="badge">8970</span></a>
    </li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">缩放排版 <span class="badge">145</span></a>
    </li>
    <li class="table-view-divider">Ratchet教程</li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">Ratchet安装 <span class="badge">90</span></a>
    </li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">Ratchet组件 <span class="badge">189</span></a>
    </li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">Ratchet创建项目 <span class="badge">99</span></a>
    </li>
  </ul>
</div>

立马见效:

Ratchet教程:自定义列表

或许你会觉得默认的badge风格不能彰显你的个性,Ratchet还提供了几种不同的颜色风格:

<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>

后面四种是不带背景的,不仿将前面的每一种配到我们示例中去展示一下:

<div class="content">
  <ul class="table-view">
    <li class="table-view-divider">CSS3教程</li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">圆角border-radius <span class="badge">10989</span></a>
    </li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">渐变gradient <span class="badge badge-primary">23908</span></a>
    </li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">盒子阴影box-shadow <span class="badge">1249</span></a>
    </li>
    <li class="table-view-divider">响应式设计</li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">CSS3 Media Queries <span class="badge badge-positive">8976</span></a>
    </li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">图片自适应 <span class="badge badge-negative">8970</span></a>
    </li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">缩放排版 <span class="badge">145</span></a>
    </li>
    <li class="table-view-divider">Ratchet教程</li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">Ratchet安装 <span class="badge">90</span></a>
    </li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">Ratchet组件 <span class="badge">189</span></a>
    </li>
    <li class="table-view-cell">
      <a href="##" class="navigate-right">Ratchet创建项目 <span class="badge">99</span></a>
    </li>
  </ul>
</div>

效果如下:

Ratchet教程:自定义列表

有时候这四种风格还不能满足你整站的设计需求,那么也很简单,因为Ratche框架把"Badge"当作一个组件来处理,而且也对应有一个badge.scss文件,你可以像这下这样,根据自己的设计定义自己需要的风格:

// 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组件在这里不展开阐述了,我们继续回到示例中来。现在与设计图相比,可以说我们已完成了大部分效果,现在仅剩下顶部的带图片的列表效果。其实这种效果在Ratchet也对应有的,接下来针对这一块内容我们继续往下。

在Ratchet官网中,提供带图片的列表的结构如下:

<ul class="table-view">
    <li class="table-view-cell media">
        <a class="navigate-right">
            <img class="media-object pull-left" src="http://placehold.it/42x42">
            <div class="media-body">
                Item 1
                <p>Lorem ipsum dolor sit...</p>
            </div>
        </a>
    </li>
    ....
</ul>

二话先不说,直接套进去再讲:

<div class="content">
  <ul class="table-view">
    <li class="table-view-cell media">
      <a class="navigate-right">
        <img class="media-object pull-left" src="https://static.fedev.cn/sites/default/files/styles/print_image/public/source/css3-web-design-examples.jpg" width="50" height="50">
        <div class="media-body">
          <div class="submite">最热门文章</div>
          <h4>CSS3属性教程与案例分享</h4>
          <p>最全,最新CSS系列教程与案例分析</p>
        </div>
      </a>
    </li>
    ...
  </ul>
</div>  

刷新浏览器:

Ratchet教程:自定义列表
相比设计图,目前效果,顶部多了一条边框线,而且还有一个margin-top值;右边多了一个向右的箭头,同时图片右侧的文本样式基本上都是要重新修改的。我们接下来一点一点的处理。

先把右边的箭头去了,去掉<a class="navigate-right">标签中的navigate-right类名,箭头自动会消失,但其右侧的padding值还是依旧存在的,这样一来我们就需要覆盖这个值。

先来看一张截图:

Ratchet教程:自定义列表

table-views.scss文件中有这样的一段代码:

.table-view-cell {
  position: relative;
  padding: 11px 65px 11px 15px;
  overflow: hidden;
  border-bottom: $border-table-views;

  // Remove the border from the last table view item
  &:last-child {
    border-bottom: 0;
  }
  // If it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
  > a:not(.btn) {
    position: relative;
    display: block;
    padding: inherit;
    margin: -11px -65px -11px -15px; // Make the entire list item tappable.
    overflow: hidden;
    color: inherit;

    &:active {
      background-color: #eee;
    }
  }
  p {
    margin-bottom: 0;
  }
}

我在想能否不影响别的情况之下,将内容往右拉回去。仔细观察,在table-view-cell有一个padding-right值为65px。这个情形是默认情况,而且大多数情形之下是用来为放置向右箭头的。也就是说没有箭头的,在table-view-cell下的<a>元素就没有类名navigate-right。这样一来就好办了:

.table-view-cell {
  ...

  > a:not(.navigate-right){
    margin-right: -115px;
  }
  ...
}

Ratchet教程:自定义列表

好极了!达到预想的效果。不过我们得考虑一下其他情形,比如说别的tabe-view-cell没有向右的剪头,会不会有所影响,如示例中带badge的列表。为以验证一下,只需要在浏览器调试工具中试试就知道了:

Ratchet教程:自定义列表

根据同前面原理,我们做一次修改:

.table-view-cell a:not(.navigate-right){
  > .btn,
  > .badge,
  > .toggle {
    right: 65px;
  }
}

刷新浏览器,并在里面模拟一回:

Ratchet教程:自定义列表

这里将.btn.toggle一起处理了,因为他们也同样会出现在这样的状态之下。效果已实现一些了,现在我们要去掉顶部的边框和margin值。借助调试工具,你不难找出:

.content > .table-view:first-child {
  margin-top: 15px;
}

将上面的代码修改成:

.content > .table-view:first-child {
  border-top: none;
}

效果就出来了:

Ratchet教程:自定义列表

最后只剩下修改media中的文本样式了。在table-views.scss文件中找到这样的代码:

.table-view .media,
.table-view .media-body {
  overflow: hidden;
}

对应我们的结构,我们可以把文本样式加在这里面:

.table-view .media,
.table-view .media-body {
  overflow: hidden;

  .submite {
    font-size: 12px;
    line-height: 1;
    margin-bottom: 5px;
    color: #94999c;
  }

  h4 {
    font-size: 16px;
    line-height: 1;
    margin-bottom: 5px;
  }
  p {
    font-size: 12px;
    color: #94999c;
  }
}

效果如下:

Ratchet教程:自定义列表

那么看到上图的效果,我们今天的任务也算是完成了,这篇教程也结束了。

结论

在本节教程当中,主要介绍了如何依赖于Ratchet框架的“Table Views”组件,实现自己的效果。以设计为基础,根据框架提供的结构,从简单到复杂,一步一步向设计靠近,从而完成所需的效果。

待续...

Ratchet框架中有关于“Table Views”效果往往不只今天介绍的,在下一节教程中,我们将继续围绕这个组件,实现其他设计效果,比如说带按钮的,带开关的效果等。感兴趣的同学欢迎观注相关教程的更新。

download

如需转载,烦请注明出处:https://www.fedev.cn/mobile/custom-table-views-with-ratchet.html

Material Matters: The Evolution of Air in Sneakers