Question

当我点击button时，按钮颜色从#F74422变为原色一段时间。如何删除原色？

.click-button {
    background-color: #F74422;
}

<button ion-button class="click-button" full (tap)="clickme()">Click</button>

Answer 1

正如您在文档的 Overriding Ionic Sass variables 部分中所看到的那样，当您将按钮声明为颜色时，例如，{I}在幕后Ionic将将以下样式应用于Android按钮：

primary

类似的事情也发生在ios按钮上。这就是您在使用css样式规则更改$button-md-background-color: color($colors-md, primary) $button-md-background-color-activated: color-shade($button-md-background-color) $button-md-background-color-hover: $button-md-background-color时看到主要颜色的原因。按钮的background-color和activated状态仍然使用从Ionic定义的hover颜色获得的颜色。

更改按钮背景颜色的 Ionic方式将在primary文件中添加新颜色：

variables.scss

然后使用$colors: ( primary: #488aff, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: #222222, newcolor: #F74422 // <--- Here! );属性

在按钮中使用该颜色

color

这样Ionic将创建所有样式规则，使按钮为每个状态使用该颜色。

Answer 2

尝试离子4：

<ion-button class="my-button" expand="block" shape="round">TEXT</ion-button>

.my-button {
  --background: #4daf7c;
  --background-activated: #4daf7c;
}

Answer 3

由于焦点和访问而发生你需要覆盖

.click-button:focus

和

.click-button:visited

以及

如何在单击按钮时删除主要颜色

3 个答案: