【Appetite】ionic3实录（四）微调Segment，并引出自定义组件概念

再次观察UI设计效果图，里面用的比较多的是这种样式的选项卡：

image.png

用ionic3来实现就是采用segment组件。其中ios和android的样式分别如下两图：

ios的segment

android的segment

可见，android的segment样式比较接近，所以我们选用android的样式（md，Google最先提出的，成为android官方样式规范），把contact.html的<ion-header>标签部分换成下面内容：

<ion-header no-border>
  <ion-toolbar>
    <ion-segment mode="md">
      <ion-segment-button>
        EXPLAIN
      </ion-segment-button>
      <ion-segment-button>
        GROUP CHAT
      </ion-segment-button>
      <ion-segment-button>
        CONTACTS
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

注：关键代码是这句mode="md"，它指定了该组件的模式为md。因为前面章节，我们在app.module.ts中做了全局配置mode="ios"，所以组件默认都会使用ios样式，所以这里指定为md。

然后看看效果：

image.png

可以发现每项下面的线太长了：

image.png

在Chrome调试可以看到，这其实是属于ion-segment-button的下border，所以长度无法修改的，于是我们换另一种方式——添加一个短border的div：

1. <ion-segment-button>里面添加一个class="bolder-sm"的div

<ion-header no-border>
  <ion-toolbar>
    <ion-segment mode="md">
      <ion-segment-button>
        EXPLAIN
        <div class="bolder-sm"></div>
      </ion-segment-button>
      <ion-segment-button>
        GROUP CHAT
        <div class="bolder-sm"></div>
      </ion-segment-button>
      <ion-segment-button>
        CONTACTS
        <div class="bolder-sm"></div>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

2. 在app.scss文件添加下面样式：

/***** segment颜色定制 start *********/
.segment-md .segment-button {
    color: color($colors, gray) !important;
}
.segment-md .segment-button.segment-activated {
    color: color($colors, primary) !important;
    font-weight: bold;
    .bolder-sm{
        border: 5px solid color($colors, primary);
        width: 20px;
        margin: 0 auto;
    }
}
/***** segment颜色定制 end ********/

3. 最后把原ion-segment-button的border去掉，在variables.scss添加如下内容：

$segment-button-md-border-bottom-width: 0px;
$segment-button-md-font-size: 1.4rem;

最后运行查看效果：

调整后的效果

而对于这种有反转色的情况：

image.png

/*********** 背景色 start **********/
.primary-bg {
    .toolbar {
        .toolbar-background {
            background-color: color($colors, primary);
        }
        .toolbar-title{
            color: color($colors, light);
        }
    }
    .segment-md .segment-button {
        color: color($colors, light-gray) !important;
    }
    .segment-md .segment-button.segment-activated{
        color: color($colors, light) !important;
        font-weight: bold;
        .bolder-sm{
            border: 5px solid color($colors, light);
            width: 20px;
            margin: 0 auto;
        }
    }
}
/*********** 背景色 end **********/

最后我们可以在about.html里添加相应组件：

<ion-header class="primary-bg" no-border>
  <ion-navbar>
    <ion-buttons start>
      <button ion-button icon-only color="light">
         <ion-icon name="md-add"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>
      RECIPE ARCHIVE
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only color="light">
          <ion-icon name="md-menu"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
  <ion-toolbar>
    <ion-segment mode="md">
      <ion-segment-button value="one">
        DESSERT
        <div class="bolder-sm"></div>
      </ion-segment-button>
      <ion-segment-button value="two">
        DRINKS
        <div class="bolder-sm"></div>
      </ion-segment-button>
      <ion-segment-button value="three">
        EINKORN
        <div class="bolder-sm"></div>
      </ion-segment-button>
      <ion-segment-button value="four">
        LIFESTYLE
        <div class="bolder-sm"></div>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

运行看看效果：

反色背景效果

可以看到，界面美化基本就是原有组件和样式调整的过程，然而可以看到，在调整原有组件过程中，增加了页面的代码量，不利于阅读，所以我们应该把它封装成自定义组件，以便于复用，这是后话，后面章节再说。