Ionic применять разные стили кнопок - PullRequest
Новая
       9

Ionic применять разные стили кнопок

0 голосов
/ 14 ноября 2018

Я хочу применить различные стили кнопок в моем представлении от моих объявленных глобальных стилей кнопок в theme / variables.scss 

button_green{}
button_red{}

в моем логине.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>

Ответы [ 2 ]

0 голосов
/ 17 декабря 2018 
    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
0 голосов
/ 16 ноября 2018

Чтобы использовать пользовательский стиль кнопок, Вы можете следовать моей инструкции ниже:

1 - Если вы хотите создать глобальный стиль, вам нужно добавить свой класс стилей в / theme / variables.scss , как показано ниже: Примечание: Вам необходимо добавить ! Важный , чтобы перезаписать ионный стиль по умолчанию. 

.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: В результате вы увидите:

enter image description here

Вы можете найти полный источниккод с этим хранилищем: Ionic Button Custom Collor .

Надеюсь, это поможет вам:)

...