离子适用不同的按钮样式

Question

我想在主题/变量/变量.scss中声明的全局按钮样式中应用不同的按钮样式

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 来覆盖默认的离子样式。

.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。

我希望这会对您有所帮助：）

Answer 2

    If you want a custom button colors you can use below code -

    1 - Declare below code in your CSS class

.font-size{
font-size : 2vw;
         }

    .red{
      background-color: red ;
    } 
    .blue{
      background-color: blue ;
    }  
    .green{
      background-color: green ;
    }
    .yellow{
      background-color: yellow ;
    } 

    2.

    <button ion-button class="font-size red">red</button> 
    <button ion-button class="font-size blue">blue</button>  
    <button ion-button class="font-size green">green</button>  
    <button ion-button class="font-size yellow">yellow</button> 

Note - You can also use one class with another class