个性化按钮切换组(材料2)

时间:2017-12-26 10:07:59

标签: css angular angular-material2

我有这个按钮组切换材料2(角度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>

这是我的按钮组

但是,我想将其更改为

2 个答案:

答案 0 :(得分:4)

我解决了这个问题,覆盖了自定义指令

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

答案 1 :(得分:0)

使用下面的CSS代码:

.mat-button-toggle-checked {
   border: 1px solid #c5c0c7;
   background-color: #e1dde5; 
}