CODEWITHSUNDEEP
htmltwitter-bootstrapbuttonbuttongroup
Fried Maxi
Fried Maxi

Reputation: 83

Give button the appearance that it has been activated

Hi im using bootstrap 4 , i have this buttons grup and i need to keep each button active when user clicks to it.. Right now if i click to one button it will give it the appearance that it has been activated, but when clicking anywhere in the screen this appearance dissapears... how can i achive this? thanks! 

 <div class="btn-group btn-group-sm btn-responsive " role="group" >
                    <button (click)="test('tx1')"  type="button" class="btn btn-secondary btn-responsive"  >Tx1</button>
                    <button (click)="test('tx2')" type="button" class="btn btn-secondary btn-responsive " >Tx2</button>
                    <button (click)="test('tx3')" type="button" class="btn btn-secondary btn-responsive ">Tx3</button>
                    <button (click)="test('tx4')" type="button" class="btn btn-secondary btn-responsive ">Tx4</button>
                    <button (click)="test('rx1')" type="button" class="btn btn-secondary btn-responsive ">Rx1</button>
                    <button (click)="test('rx2')" type="button" class="btn btn-secondary btn-responsive ">Rx2</button>
                    <button (click)="test('obst')" type="button" class="btn btn-secondary btn-responsive ">Obstaculo</button>
                  </div>

Upvotes: 0

Views: 87

Answers (1)

DrNio
DrNio

Reputation: 1976

You need to toggle an active CSS class onclick of each button element. The .active or whatever name you choose will have the styling you need. Do you use some JS framework ? So I can paste an example snippet.

In Angular it would be

.html

<button (click)="test('tx1')" [class.active]="activeButtonName === 'tx1'"  type="button" class="btn btn-secondary btn-responsive"  >Tx1</button>

<button (click)="test('tx2')" [class.active]="activeButtonName === 'tx2'"  type="button" class="btn btn-secondary btn-responsive"  >Tx2</button>

.scss

 .active {
     // your styles go here
    }

And in each button you set it like this .ts file

public activeButtonName: string = ''

test(buttonName: string): void {
 this.activeButtonName = buttonName;
}

Upvotes: 0

Related Questions