角材料中样式单选按钮的样式 [英] Styling mat-radio-button in Angular Material
问题描述
我刚刚开始在Angular应用程序中使用Angular Material主题.
I have just started using the Angular Material theme within my Angular app.
我使用了一些单选按钮,但希望对它们进行样式设置,以使其比平时更小.我可以设置文本标签的样式,但要努力为实际的按钮本身(圆圈)设置样式.
I make use of some radio buttons but want to style them so that they are smaller than usual. I can style the text labels but I am struggling to style the actual buttons themselves (the circles).
现在,我有
<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>
我应该怎么做?
推荐答案
尝试一下,
默认半径为20px
,我们在此处将其设置为10px
Default radius is 20px
we are setting it to 10px
here
: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
Without using ::ng-deep
关闭在其中使用自定义无线电的组件的封装.
Turn off encapsulation of your component inside which you use the custom radio.
您可以通过
import {Component,ViewEncapsulation} from '@angular/core';
@Component({
selector: 'example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
encapsulation : ViewEncapsulation.None,
})
export class ExampleComponent {}
将要设置样式的组件包装到自定义类中,因此不会影响其他任何无线电组件.
在上面的问题中,它已经包装了smallRadio
类
Wrap the component you want to style in a custom class.So it wont affect any other radio components.
In the above question its already wrapped with 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,而无需关闭视图封装.但更优雅的方法是上述方法
You can add these css in global stylesheet without turning off view encapsulation. But more elegant method is the above one
这篇关于角材料中样式单选按钮的样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!