我有一组切换按钮。它们非常轻,在背景中消失在高亮度的不良显示器上。
我该如何正确地设计它们?我更喜欢为它们分配重音或主要颜色,就像常规按钮一样。
在可能的情况下,主色和强调色是暗的。所以他们的文字应该变成白色(有一些透明度)。对于常规按钮,它会自动运行。
<div class="output-size">
<mat-button-toggle-group>
<mat-button-toggle value="letter">Letter</mat-button-toggle>
<mat-button-toggle value="legal">Legal</mat-button-toggle>
<mat-button-toggle value="a4">A4</mat-button-toggle>
<mat-button-toggle value="a5">A5</mat-button-toggle>
</mat-button-toggle-group>
</div>
答案 0 :(得分:35)
matButtonToggle
不支持color
等matButton
属性。
您可以使用css类.mat-button-toggle
和.mat-button-toggle-checked
来设置不同状态的样式。
使用材料主题,您可以从主题中提取您需要的任何单个调色板,并将背景默认对比色应用于文本颜色,以实现与浅色或深色的最佳对比。
以下是mat-button-toggle-group
示例的 Stackblitz :Stackblitz
angular-t1k1x6
使用主题:
@import '~@angular/material/theming';
@include mat-core();
$app-primary: mat-palette($mat-indigo);
$app-accent: mat-palette($mat-pink, A200, A100, A400);
$app-theme: mat-light-theme($app-primary, $app-accent);
@mixin mix-app-theme($app-theme) {
$primary: map-get($app-theme, primary);
$accent: map-get($app-theme, accent);
.mat-button-toggle {
background-color: mat-color($primary);
color: mat-color($primary, default-contrast);
}
.mat-button-toggle-checked {
background-color: mat-color($accent);
color: mat-color($accent, default-contrast);
}
}
// Include the mixin
@include mix-app-theme($app-theme);
答案 1 :(得分:3)
使用您自己的主题自定义演示文稿SASS,正如另一个答案所示,是一个很好的短期解决方案,并为您提供了很多演示文稿的强大功能。理想情况下,这将成为核心主题声明的一部分,因此<mat-button-toggle-group color="primary">
(也许<mat-button-toggle color="primary">
)只能在没有额外步骤的情况下工作。
如果您希望将来更简单,请竖起大拇指this issue。
答案 2 :(得分:1)
mat-button-toggle-group {
box-shadow: none;
}
mat-button-toggle {
border: 1px rgba(0,0,0,0) solid !important;
margin-top: 5px !important;
padding: 0 5px !important;
z-index: 3 !important;
}
mat-button-toggle:hover {
border: 1px #000 solid !important;
background-color: #FFF !important;
border-radius: 5px !important;
}
.mat-button-toggle-checked {
box-shadow: 0 0 30px #000 !important;
border: 1px #000 solid !important;
border-radius: 5px !important;
background-color: #FFF !important;
}
.mat-button-toggle-input {
background-color: none !important;
padding-left: 32px !important;
}
如果您只想更改选中的样式
答案 3 :(得分:1)
您可以将这三个 CSS 类 .mat-button-toggle 和 .mat-button-toggle-checked 用于两种样式状态
HTML 代码
<mat-button-toggle-group>
<mat-button-toggle value="letter">Letter</mat-button-toggle>
<mat-button-toggle value="legal">Legal</mat-button-toggle>
<mat-button-toggle value="a4">A4</mat-button-toggle>
<mat-button-toggle value="a5">A5</mat-button-toggle>
</mat-button-toggle-group>
CSS 代码 - 您必须使用 !important
.mat-button-toggle{
background-color: #306cee;
color: #ffffff;
}
.mat-button-toggle:hover {
background-color: transparent;
color: #1100ff !important;
}
.mat-button-toggle-checked {
background-color: #ec2c4c;
color: #67ec79 !important;
}
答案 4 :(得分:0)
解决方法可能类似于:
<mat-button-toggle-group>
<mat-button-toggle value="letter">
<button mat-button color="primary" style="pointer-events:none;">
Letter
</button>
</mat-button-toggle>
<mat-button-toggle value="legal">
<button mat-button color="accent" style="pointer-events:none;">
Legal
</button>
</mat-button-toggle>
</mat-button-toggle-group>
答案 5 :(得分:0)
在styles.scss中添加以下样式
OutOfMemoryError
ps:我假设您选择了@import '~@angular/material/theming';
@include mat-core();
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-yellow, A200, A100, A400);
$theme: mat-light-theme($primary, $accent);
@include angular-material-theme($theme);
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: Roboto, 'Helvetica Neue', sans-serif;
.mat-button-toggle-checked {
background-color: mat-color($primary);
color: mat-color($primary, default-contrast);
}
}
和scss