Персонализируйте группу кнопок-переключателей (Материал 2)

У меня эта группа кнопок переключается с помощью 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>

Это моя группа кнопок

Но я хотел бы изменить это на это


angular css angular-material2
person lesimoes    schedule 26.12.2017    source источник
comment
Мне кажется, что стиль матовой кнопки-переключателя должен по умолчанию центрировать текст. Применяются ли свойства css из материала к элементам в вашем шаблоне?   -  person Jota.Toledo    schedule 26.12.2017

Ответы (2)


arrow_upward
8
arrow_downward

Я решаю эту проблему, переопределяя пользовательские директивы

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;
}
person lesimoes    schedule 31.12.2017
comment
Что такое center-text? - person An-droid; 02.10.2018

arrow_upward
1
arrow_downward

Используйте ниже CSS код:

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