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

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

image.png

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

ios的segment android的segment

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

                    EXPLAIN                    GROUP CHAT                    CONTACTS

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

然后看看效果：

image.png

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

image.png

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

里面添加一个class="bolder-sm"的div

                    EXPLAIN                            GROUP CHAT                            CONTACTS

在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 ********/

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

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

最后运行查看效果：

调整后的效果

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

image.png
我们只需在全局样式文件 app.scss中的 .primary-bg里添加类似代码即可：

/*********** 背景色 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里添加相应组件：

                          RECIPE ARCHIVE                                        DESSERT                            DRINKS                            EINKORN                            LIFESTYLE

运行看看效果：

反色背景效果

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

更多相关文章

随机推荐