Question

我有mat-button-toggle，想将border-radius更改为20px，但仍然是4px。

我做错了什么？

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

    }

Answer 1

使用:host和.mat-button-toggle-group

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

See working code

Answer 2

如果您想更改单个切换按钮的边框外观，可以在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; }

侧面说明：我注意到单击按钮时，动画仍为矩形。我认为这也是可调的，但只有放大时才能看到。

如何更改垫子按钮切换的边框半径

2 个答案: