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

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

Это кнопки:

<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", но, поскольку их несколько, я немного потерялся.

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


angular button vmware-clarity
person Ricardo Sanchez Santos    schedule 02.03.2020    source источник
comment
Вы взглянули на примеры флажков/радио в нижней части clarity.design/documentation/button-group? ? Вероятно, это то, что вам нужно, если вы не используете переполнение меню.   -  person Jeremy Wilken    schedule 02.03.2020
comment
@Jeremy Wiljen Я проверяю это правильно, есть ли у него такой компонент, как clr-button? или мне нужно изменить код для моего clr-buttons?   -  person Ricardo Sanchez Santos    schedule 02.03.2020
comment
Обычно вам не нужен компонент clr-button, за исключением случаев, когда вы используете функцию переполнения.   -  person Jeremy Wilken    schedule 06.03.2020

Ответы (1)


arrow_upward
1
arrow_downward

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

<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>
person domingo    schedule 03.03.2020