2017-12-26 35 views
0

(角5)パーソナライズボタントグル・グループ(資料2)私は資料2に、このボタングループのトグルを持って

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

これは、私のボタングループ

enter image description here

だが、私は好きその

enter image description here

+0

はマット・ボタン・トグルのスタイリングは、デフォルトでは、テキストを中央揃えなければならないように私には思えるのカスタムディレクティブを上書きします。テンプレートの要素に適用される素材のCSSプロパティはありますか? –

答えて

0

I sの変更この問題OLVE

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; 
} 
関連する問題