Кнопка Clr, состояние нажата - PullRequest
Новая
       18

Кнопка Clr, состояние нажата

0 голосов
/ 02 марта 2020

Есть ли простой способ изменить стиль кнопки? так это выглядит нажатым? Я использую кнопку clr из проекта ясности, у меня есть несколько кнопок на странице, и мой босс хочет, чтобы неотжатая кнопка приняла стиль вспомогательной кнопки, а нажатая кнопка должна выглядеть как основная кнопка.

Это кнопки: 

<div id="StatusButtons">
<clr-button-group>
    <clr-button (click)="externalFilterChanged('Upcoming', 'Stipulations')">Upcoming</clr-button>
    <clr-button (click)="externalFilterChanged('Overdue', 'Stipulations')">Overdue</clr-button>
    <clr-button (click)="externalFilterChanged()">All</clr-button>
</clr-button-group>
<clr-button-group>
    <clr-button (click)="externalFilterChanged('PA', 'Type')">PA</clr-button>
    <clr-button (click)="externalFilterChanged('MOA', 'Type')">MOA</clr-button>
    <clr-button (click)="externalFilterChanged('MOU', 'Type')">MOU</clr-button>
    <clr-button (click)="externalFilterChanged('Covenant', 'Type')">Cov</clr-button>
    <clr-button (click)="externalFilterChanged('BSC', 'Type')">BSC</clr-button>
    <clr-button (click)="externalFilterChanged()">All</clr-button>
</clr-button-group>
<clr-button-group>
    <clr-button (click)="externalFilterChanged('Opened', 'Status')">Opended</clr-button>
    <clr-button (click)="externalFilterChanged('Approval', 'Status')">Approval</clr-button>
    <clr-button (click)="externalFilterChanged('Monitoring', 'Status')">Monitoring</clr-button>
    <clr-button (click)="externalFilterChanged('Closed', 'Status')">Closed</clr-button>
    <clr-button (click)="externalFilterChanged()">All</clr-button>
</clr-button-group>
</div>

, если бы их было только две, я подумал, что, возможно, в логическом значении для переключения между class="btn" и class="btn btn-primary", но так как их несколько, я вроде потерян.

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

1 Ответ

1 голос
/ 03 марта 2020

Что-то вроде ниже должно сделать галочку: 

<div class="btn-group">
    <button class="btn" [class.btn-primary]="true">
       one
    </button>
    <button class="btn" [class.btn-primary]="false">
        two
    </button>
    <button class="btn" [class.btn-primary]="false">
       three
    </button>
</div>
...