Коврик-радиокнопка для укладки в угловой материал

Question

Я только начал использовать тему Angular Material в своем приложении Angular.

Я использую некоторые радиокнопки, но хочу, чтобы они были стилизованы так, чтобы они были меньше, чем обычно.Я могу стилизовать текстовые метки, но я изо всех сил пытаюсь стилизовать сами кнопки (круги).

Итак, сейчас у меня есть

<mat-radio-group class="smallRadio">
    <mat-radio-button value="1">Option 1</mat-radio-button>
    <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>

Как мне поступить?

Answer 1

Попробуйте,

Радиус по умолчанию: 20px Здесь мы устанавливаем 10px

    :host ::ng-deep .mat-radio-container{
      height: 10px;
      width: 10px;
    }
    :host ::ng-deep .mat-radio-outer-circle{
      height: 10px;
      width: 10px;
    }
    :host ::ng-deep .mat-radio-inner-circle{
      height: 10px;
      width: 10px;
    }
    :host ::ng-deep .mat-radio-button .mat-radio-ripple{
      height: 20px; /*double of your required circle radius*/
      width: 20px;  /*double of your required circle radius*/
      left: calc(50% - 10px); /*'10px'-same as your required circle radius*/
      top: calc(50% - 10px); /*'10px'-same as your required circle radius*/
    }

Без использования ::ng-deep

Отключите инкапсуляцию вашего компонента, внутри которого вы используете пользовательское радио.

Это можно сделать с помощью

import {Component,ViewEncapsulation} from '@angular/core';
@Component({
  selector: 'example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  encapsulation : ViewEncapsulation.None,
})
export class ExampleComponent {}

Обернуть компонент, который вы хотите стилизовать, в пользовательский класс.это не повлияет на другие радиокомпоненты.В приведенном выше вопросе он уже заключен в smallRadio class

.smallRadio .mat-radio-container{
    height: 10px;
    width: 10px;
}
.smallRadio .mat-radio-outer-circle{
    height: 10px;
    width: 10px;
}
.smallRadio .mat-radio-inner-circle{
    height: 10px;
    width: 10px;
}
.smallRadio .mat-radio-button .mat-radio-ripple{
    height: 20px; 
    width: 20px; 
    left: calc(50% - 10px); 
    top: calc(50% - 10px); 
}

. Вы можете добавить эти CSS в глобальную таблицу стилей, не отключая инкапсуляцию вида.Но более элегантный метод - вышеупомянутый