美文网首页Ionic Frameworkhybrid APP(ionic)ionic2
[Ionic 2从入门到精通] 6.8 自定义样式

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

作者: 老牛啃码 | 来源:发表于2018-05-17 19:47 被阅读4次

    这个应用已经很漂亮了,所以这里没有太多自定义的东西,所以这节课非常的快。但是我们还是要做点啥。
    我们先从修改颜色变量开始。
    > 修改 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不会随着用户输入去调整。
    现在应用看起来应该是这样的:

    5.9.1.jpg 5.9.2.jpg

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

    相关文章

      网友评论

      本文标题:[Ionic 2从入门到精通] 6.8 自定义样式

      本文链接:https://www.haomeiwen.com/subject/xgeidftx.html