CODEWITHSUNDEEP
cssangular
Michael Mitch
Michael Mitch

Reputation: 433

How to change border-radius of mat-button-toggle

I have mat-button-toggle and want to change the border-radius to 20px, but it is still 4px.

What i do wrong?

<mat-button-toggle-group class="ruleActionOnOffButton" name="fontStyle" aria-label="Font Style" *ngIf="modules.type === action.type && modules.id === action.id" value="{{action.action}}">
  <mat-button-toggle value="1" (change)="selectionChanged($event,i)">An</mat-button-toggle>
  <mat-button-toggle value="2" (change)="selectionChanged($event,i)">Aus</mat-button-toggle>
  <mat-button-toggle value="3" (change)="selectionChanged($event,i)">Toggle</mat-button-toggle>
</mat-button-toggle-group>

Css

/deep/ .mat-button-toggle-group-appearance-standard, .mat-button-toggle-standalone.mat-button-toggle-appearance-standard{
        border-radius: 20px !important;
    }

    .ruleActionOnOffButton .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{
        border-radius: 20px !important;

    }

Upvotes: 4

Views: 14905

Answers (2)

JetMorra
JetMorra

Reputation: 1

If you like to change the border appearance of a single toggle button you can adjust it within the styles.scss:

// This will adjust the hover background of the toggle button to look like a material button:
.mat-button-toggle.mat-button-toggle-appearance-standard:hover { 
border-radius: 4px !important; }

// And this will keep the background when the button is pressed:
.mat-button-toggle-checked.mat-button-toggle-appearance-standard {
border-radius: 4px !important; }

Side note: I have noticed that the animation, when the button is clicked, is still rectangular. I think this also adjustable, but you'll only see it when you zoom in.

Upvotes: -1

לבני מלכה
לבני מלכה

Reputation: 16251

Use :host and .mat-button-toggle-group

:host .mat-button-toggle-group{
    border-radius: 20px !important;
}

See working code

Upvotes: 4

Related Questions