Стильный коврик-радио-кнопка в угловом материале

Я только начал использовать тему 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>

Как мне это сделать?


angular-material angular7
person BENBUN Coder    schedule 22.12.2018    source источник

Ответы (4)


arrow_upward
17
arrow_downward

Попробуй это,

Радиус по умолчанию 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

.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 в глобальную таблицу стилей, не отключая инкапсуляцию представления. Но более элегантный метод - вышеупомянутый

person Akhi Akl    schedule 22.12.2018
comment
Я считаю, что функция: ng-deep устарела и в какой-то момент перестанет работать, как правильно стилизовать кнопку в Angular 8 и выше? - person chrisinmtown; 28.06.2019
comment
Привет @chrisinmtown. Я обновил ответ. Дополнительные сведения см. В разделе настройка угловых компонентов материала. - person Akhi Akl; 28.06.2019

arrow_upward
9
arrow_downward

Пожалуйста, не используйте ViewEncapsulation.None в своем проекте. В будущем это приведет к непредсказуемому поведению. Когда вы меняете стили внутри одного компонента, некоторые другие компоненты также могут быть изменены, и будет сложно найти, какие именно.

Если вы хотите переопределить стили материала angular, я предлагаю создать отдельный * .scss в вашем проекте с именем вроде "material-overrides.scss", куда вы будете помещать все изменения стиля для разных компонентов. Например, ваш файл может выглядеть так

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

Обратите внимание на !important в моем примере. Это тоже не очень хорошая практика. Вам необходимо заменить его более точной спецификацией веб-документами MDN.

Также не забудьте добавить созданный material-overrides.scss файл в styles.scss вот так:

@import './material-overrides.scss';

Вы также можете прочитать рекомендации по переопределению от команды angular material - ссылка.

person Sergey_T    schedule 04.10.2019

arrow_upward
4
arrow_downward

Думаю, этого должно хватить:

.mat-radio-container {
    transform: scale(0.85);
}

Выберите число на шкале в соответствии с вашими потребностями.

person dominik    schedule 24.04.2020
comment
поскольку мы можем применить свойство css непосредственно к элементу mat-radio-button;) - person Smaillns; 17.05.2020
comment
Проблема, которую я обнаружил, заключается в том, что эффект пульсации (при нажатии) все еще имеет исходный размер, поэтому он выглядит смещенным от недавно масштабированного .mat-radio-container - person R Brill; 20.07.2021

arrow_upward
1
arrow_downward

Попробуй: у меня работает с галочкой, меняю css

    :host ::ng-deep .mat-radio-outer-circle{
      border-radius:2px;
    }
    :host ::ng-deep .mat-radio-inner-circle{
        border-radius:2px;
        background-color: transparent!important;
        border-bottom: 4px solid white;
        border-right:4px solid white;
        height:30px;  
        width:15px;
        margin-top: -8px;
       margin-left: 3px;
    }
    :host ::ng-deep .mat-radio-checked .mat-radio-outer-circle{
       background:#ff4081!important;
    }
    :host ::ng-deep .mat-radio-checked .mat-radio-inner-circle{
       transform: rotate(45deg) scale(0.5);
    }
 
    :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 */
    }
person stannars jose    schedule 10.01.2021