美文网首页Ionic之路
ionic4开发——更改样式

ionic4开发——更改样式

作者: 漂泊猫 | 来源:发表于2018-11-02 13:47 被阅读47次

题外话

  • 现在是2018-11-02 更新cli后为4.3.0,可以看见tabs变了,应该是解决了以前tabs和返回的bug问题。
  • vs可以安装ionic4插件,方便创建标签了。

开始主题

  1. 打开官网的组件,都会看见有个CSS Custom Properties(如[badge]https://beta.ionicframework.com/docs/api/badge#css-custom-properties),经过一早上的研究我终于知道这个东西怎么使用了(也可能不是最正确的姿势,知道的大神请留言告诉我)。
<ion-badge>99</ion-badge>
<ion-badge style="--background:#abc; --color: #f60;">99</ion-badge>
  1. 那怎么修改color="primary"这种呢?也有方法
<ion-button color="primary">使用自带颜色</ion-button>
<ion-button color="mycolor">使用我的颜色</ion-button>
// 对应scss添加
.ion-color-mycolor {
    --ion-color-base: #ff600d;
    --ion-color-base-rgb: 255,96,13;
    --ion-color-contrast: #ffffff;
    --ion-color-contrast-rgb: 255,255,255;
    --ion-color-shade: #e0540b;
    --ion-color-tint: #ff7025;
}
修改样式.jpg

效果图我就放一张上了,有兴趣的可以加ionic4开发群:670727319等你一起学习。

相关文章

网友评论

    本文标题:ionic4开发——更改样式

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