Personalize button-toggle-group (Material 2)
15,702
Solution 1
I solve this problem override the custom directives
mat-button-toggle {
border: 1px solid #f28628;
border-radius: 4px;
margin-left: 3px;
margin-right:3px;
width: 30px;
height: 30px;
font-family: 'Nunito Semibold', sans-serif;
font-size: 14px;
font-style: bold;
}
.mat-button-toggle-disabled {
border: 1px solid #c5c0c7;
background-color: #e1dde5;
}
div.center-text {
margin-left: -8px;
margin-top: -3px;
}
Solution 2
Use below CSS
code:
.mat-button-toggle-checked {
border: 1px solid #c5c0c7;
background-color: #e1dde5;
}
![lesimoes](https://lh4.googleusercontent.com/-_fBrWtZebT4/AAAAAAAAAAI/AAAAAAAAD30/gRdwYClA2zg/photo.jpg?sz=256)
Author by
lesimoes
My name is Leandro Simões, but you can call me Le. I'm Software Developer from Brazil, Assistant Professor and hold a master's degree in Computer Science.
Updated on June 28, 2022Comments
-
lesimoes about 2 years
I have this button group toggle with Material 2 (Angular 5)
<div class="col-md-4"> <label>Days of Week</label> <mat-button-toggle-group multiple formControlName="days_service" #group="matButtonToggleGroup" > <mat-button-toggle [value]="days.value" *ngFor='let days of days_service'> {{ days.alias }} </mat-button-toggle> </mat-button-toggle-group> </div>
This is my button group
But, I'd like to change it to that