Как активировать только одну кнопку за раз в ionic 2 - PullRequest
Новая
       10

Как активировать только одну кнопку за раз в ionic 2

0 голосов
/ 02 мая 2018

У меня есть группа из четырех кнопок 

 <button round ion-button> David </button>

 <button round ion-button> Rocky</button>

 <button round ion-button> Chris</button>

 <button round ion-button> Johny</button>

Я хочу сделать кнопку активной (изменить цвет фона) только одну кнопку за раз в машинописи. Как это сделать.

1 Ответ

0 голосов
/ 02 мая 2018

Вы можете использовать директиву NgClass, чтобы условно назначить класс CSS вашей активной кнопке. Для этого вам понадобится класс CSS и свойство в вашем .ts, чтобы знать, что такое активная кнопка.

Итак, ваш .TS будет: 

export class YourPage {
  public active: string; // add this property
  constructor() { }

  // method to update the active property
  updateActive = name => this.active = name;
}

А потом измени свой HTML: 

<button round ion-button [ngClass]="'your-css-class': active === 'david'" (click)="updateActive('david')"> David </button>

<button round ion-button [ngClass]="'your-css-class': active === 'rocky'" (click)="updateActive('rocky')"> Rocky</button>

<button round ion-button [ngClass]="'your-css-class': active === 'chris'" (click)="updateActive('chris')"> Chris</button>

<button round ion-button [ngClass]="'your-css-class': active === 'johny'" (click)="updateActive('johny')"> Johny</button>

Это должно работать, если вам нужна активная кнопка для запуска, просто присвойте ей значение в свойстве active. Если ваша активная кнопка будет управляться в вашем .ts файле, просто удалите атрибут click. Вот страница документации NgClass , если вам нужна дополнительная помощь.

Надеюсь, это поможет.

UPDATE

Обновлено, чтобы использовать метод вместо непосредственного присвоения значения щелчку, как указано в запросе.

...