Ionic 4 изменить размер и цвет кнопки вопросов - PullRequest
Новая
       42

Ionic 4 изменить размер и цвет кнопки вопросов

0 голосов
/ 15 февраля 2019

Я использую следующий код, чтобы позволить мне менять цвет кнопки, когда я нажимаю кнопку.Работает нормально.Но когда я пытаюсь добавить CSS, чтобы изменить ширину и высоту кнопок.Изменение цвета работало, но размер кнопки не изменился.Вот мой код: 

html code 
<ion-content padding>
   <ion-row>
       <ion-col width-50 style="text-align: right" no-padding >
    <button ion-button full no-margin class="bsize" (click)="addEvent('b1');" [ngStyle]="{'background-color': buttonColorb1}">button 1</button>
</ion-col>
 <ion-col width-50 style="text-align: left" no-padding>
    <button ion-button full no-margin class="bsize" (click)="addEvent('b2');" [ngStyle]="{'background-color': buttonColorb2}">button 2</button>
  </ion-col>
  </ion-row>

</ion-content>

scss code :

.bsize {
   --width: 100px;
   --height: 40px;
}

ts code :

export class TestButtonPage implements OnInit {
buttonColorb1: string = '#D3D3D3'; //Default Color
buttonColorb2: string  = '#D3D3D3'; //Default Color
constructor() { }

addEvent(btn){
if (btn == "b1") {
   this.buttonColorb1 = '#add8e6'; //desired Color
   this.buttonColorb2  = '#D3D3D3'; //desired Color
}
else {
   this.buttonColorb1   = '#add8e6'; //desired Color
   this.buttonColorb2  = '#D3D3D3'; //desired Color
  }
}
ngOnInit() {
   this.buttonColorb1 = '#add8e6'; //desired Color
   this.buttonColorb2  = '#D3D3D3'; //desired Color
 }
 }

1 Ответ

0 голосов
/ 15 февраля 2019

Использование ниже CSS, 

.bsize {
  width: 100px;
  height: 40px;
}

Пример StackBlitz

...