css - Ionic 应用不同的按钮样式

Question

我想根据我在 theme/variables.scss 中声明的全局按钮样式在我的 View 中应用不同的按钮样式

button_green{}
button_red{}

在我的 login.html 中

<button>Login</button>  //should be green
<button>Logout</button> //should be red

如何在没有个别组件特定样式的情况下为按钮分配不同的全局样式

<button color='primary' font='xyz' size='n'>Login</button>  
<button color='danger' hint='something'>Logout</button> 

还有更多这样的

<button style='button_green'>Login</button>  
<button style='button_red'>Logout</button> 

Answer 1

要使用自定义按钮样式，您可以按照我下面的说明进行操作:

1- 因为你想创建全局样式，你需要在 /theme/variables.scss 中添加你的样式类，如下所示:注意:您需要添加 !important 来覆盖默认的 ionic 样式。

.button_green{
  background-color: green !important;
}
.button_red{
  background-color: red  !important;
} 
.button_blue{
  background-color: blue !important;
}  
.button_yellow{
  background-color: yellow !important;
} 
.button_pink{
  background-color: pink !important;
}  
.button_purple{
  background-color: purple !important;
}

2- 然后在 *.html 中，您可以这样调用您的 css 类:

<button ion-button class='button_green'>button_green</button>  
<button ion-button class='button_red'>button_red</button> 
<button ion-button class='button_blue'>button_blue</button>  
<button ion-button class='button_yellow'>button_yellow</button> 
<button ion-button class='button_pink'>button_pink</button>  
<button ion-button class='button_purple'>button_purple</button>

3:结果你可以看到:

您可以在这个存储库中找到完整的源代码:Ionic Button Custom Collor .

希望对你有帮助:)