離子適用不同的按鈕樣式

Question

我想在視圖中應用與theme / variables.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