[Ionic 2从入门到精通] 6.8 自定义样式

这个应用已经很漂亮了,所以这里没有太多自定义的东西,所以这节课非常的快。但是我们还是要做点啥。
我们先从修改颜色变量开始。
> 修改 theme/variables.scss 里面的命名颜色变量如下:

$colors: (
    primary: #5b91da,
    secondary: #32db64,
    danger: #f53d3d,
    light: #f4f4f4,
    dark: #222,
    favorite: #69BB7B
);

然后给应用的添加一些通用样式。
> 在src/app/app.scss中添加如下样式:

.logo {
    max-height: 39px;
    margin-top: 6px;
}

ion-input, ion-textarea {
    background-color: #F3F3F3;
    border: 1px solid #cecece;
    padding-left: 10px;
}

ion-textarea {
    height: 200px;
}

textarea {
    height: 180px;
}

button {
    border: none !important;
}

这里我们想要做到的主要事情是给我们的输入框添加一些样式。在这之前,输入框都是白色的,他的背景也是,所以你基本看不到输入框中哪里。现在他们的背景色灰色的,以及他有一些小小的额外的样式。我们给textarea添加了一点点样式来扩展他的默认高度,也覆盖了一个目前存在的bug,也就是textarea不会随着用户输入去调整。
现在应用看起来应该是这样的:

[Ionic 2从入门到精通] 6.8 自定义样式_第1张图片
5.9.1.jpg

[Ionic 2从入门到精通] 6.8 自定义样式_第2张图片
5.9.2.jpg

这是整本书里面最小的课程了,但是,我们完成了!CamperMate现在全部完成了。

你可能感兴趣的:([Ionic 2从入门到精通] 6.8 自定义样式)