角度材质自定义选项卡
发布时间:2020-12-17 07:50:27 所属栏目:安全 来源:网络整理
导读:我正在使用角度4而我正在使用 Angular Material. md-tab-group [disableRipple]=true md-tab label="Tab 1"/md-tab md-tab label="Tab 2"/md-tab/md-tab-group 如何(未选择/选择),文本颜色等我可以完全自定义背景颜色.我已经尝试过使用伪类……但仍无济于事.
我正在使用角度4而我正在使用
Angular Material.
<md-tab-group [disableRipple]=true> <md-tab label="Tab 1"></md-tab> <md-tab label="Tab 2"></md-tab> </md-tab-group> 如何(未选择/选择),文本颜色等我可以完全自定义背景颜色.我已经尝试过使用伪类……但仍无济于事. —我已经成功设置了字体大小,但设置时文本颜色有点紧张.请帮忙. 更新: 我已经尝试在选择时将背景更改为透明…当在选项卡中未选择链接时尝试覆盖颜色等等但仍然无法正常工作. /* Styles go here */ .mat-tab-label{ color:white; min-width: 25px !important; padding: 5px; background-color:transparent; color:white; font-weight: 700; } /deep/ .mat-tab-label{ min-width: 25px !important; padding: 5px; background-color:transparent; color:white; font-weight: 700; } .md-tab.ng-scope.ng-isolate-scope.md-ink-ripple.md-active{ background-color:transparent; color:white; font-weight: 700; } .md-tab.ng-scope.ng-isolate-scope.md-ink-ripple{ background-color:transparent; color:white; font-weight: 700; } .mat-tab-label:active{ min-width: 25px !important; padding: 5px; background-color:transparent; color:white; font-weight: 700; } .mat-tab-label:selected{ min-width: 25px !important; padding: 5px; background-color:transparent; color:white; font-weight: 700; }
在组件中,将
ViewEncapsulation设置为None并在component.css文件中添加样式.
Typescript代码的变化: import {Component,ViewEncapsulation} from '@angular/core'; @Component({ .... encapsulation: ViewEncapsulation.None }) 组件CSS: /* Styles for tab labels */ .mat-tab-label { min-width: 25px !important; padding: 5px; background-color: transparent; color: red; font-weight: 700; } /* Styles for the active tab label */ .mat-tab-label.mat-tab-label-active { min-width: 25px !important; padding: 5px; background-color: transparent; color: red; font-weight: 700; } /* Styles for the ink bar */ .mat-ink-bar { background-color: green; } Demo (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |