Clr 按钮，状态按下

Question

有没有简单的方法来改变按钮的样式？所以看起来很压抑？我正在使用清晰项目中的 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 按钮的 link，或者如果有其他方法可以使它看起来像被按下，请告诉我，也许它也可以。

Answer 1

像下面这样的东西应该可以打勾：

<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>

Clr 按钮，状态按下

Clr Button, state pressed

button

angular

vmware-clarity