在角度材质(2+)中添加自定义颜色变量
在角度材质(2+)中添加自定义颜色变量
提问于 2017-11-23 20:00:06
如何为angular material创建“自定义”自己的颜色
例如，引导程序喜欢success (绿色)、warn (黄色)、danger (红色)等颜色，旁边还有primary (蓝色)、accent (粉色)。
换句话说:扩展Angular Material (2+)的颜色变量，以便在html属性中使用它：
<button mat-raised-button color="success">Success</button>或者创建一个白色复选框，如下所示：
<mat-checkbox color="white">Check me!</mat-checkbox>回答 4
Stack Overflow用户
发布于 2019-01-31 02:47:37
要添加名为success的新颜色，请进行以下更改
在主styles.css文件中添加以下样式
.mat-success {
color: #fff !important;
background-color: #28a745 !important;
}
.mat-success[disabled] {
background-color: rgba(0, 0, 0, 0.12) !important;
}
在组件中指定颜色名称
<button mat-raised-button color="success">
Stack Overflow用户
发布于 2018-12-20 22:03:22
你不能这么做。但是如果你愿意，你可以添加“color=”任何“属性到材料的一些元素中，这会为你添加自定义类。
示例：
.whatever {
background-color: light-blue;
}<button mat-button color="whatever"></button> // this button will have '.mat-whatever' class.
Stack Overflow用户
发布于 2017-11-23 21:55:31
变量在“node_modules/@ define /material/”下的"_theming.scss“中定义。.To定义我们需要修改以下函数的自定义变量。
// Creates a container object for a light theme to be given to individual component theme mixins.
@function mat-light-theme($success, $primary, $accent, $warn: mat-palette($mat-red)) {
@return (
success:$success,
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $mat-light-theme-foreground,
background: $mat-light-theme-background,
);
}
// Creates a container object for a dark theme to be given to individual component theme mixins.
@function mat-dark-theme($success, $primary, $accent, $warn: mat-palette($mat-red)) {
@return (
success:$success,
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: true,
foreground: $mat-dark-theme-foreground,
background: $mat-dark-theme-background,
);
}在同一个文件中，我们还可以将新引入的变量应用于组件，就像我将其应用于按钮一样。
// Applies a focus style to an md-button element for each of the supported palettes.
@mixin _mat-button-focus-color($theme) {
$success: map-get($theme, success);
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
&.mat-success .mat-button-focus-overlay {
background-color: mat-color($success, 0.12);
}
&.mat-primary .mat-button-focus-overlay {
background-color: mat-color($primary, 0.12);
}
&.mat-accent .mat-button-focus-overlay {
background-color: mat-color($accent, 0.12);
}
&.mat-warn .mat-button-focus-overlay {
background-color: mat-color($warn, 0.12);
}
&[disabled] .mat-button-focus-overlay {
background-color: transparent;
}
}
@mixin _mat-button-ripple-color($theme, $hue, $opacity: 0.2) {
$success: map-get($theme, success);
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
&.mat-success .mat-ripple-element {
background-color: mat-color($success, $hue, $opacity);
}
&.mat-primary .mat-ripple-element {
background-color: mat-color($primary, $hue, $opacity);
}
&.mat-accent .mat-ripple-element {
background-color: mat-color($accent, $hue, $opacity);
}
&.mat-warn .mat-ripple-element {
background-color: mat-color($warn, $hue, $opacity);
}
}
// Applies a property to an md-button element for each of the supported palettes.
@mixin _mat-button-theme-color($theme, $property, $color: 'default') {
$success: map-get($theme, success);
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
&.mat-success {
#{$property}: mat-color($success, $color);
}
&.mat-primary {
#{$property}: mat-color($primary, $color);
}
&.mat-accent {
#{$property}: mat-color($accent, $color);
}
&.mat-warn {
#{$property}: mat-color($warn, $color);
}
&.mat-success ,&.mat-primary, &.mat-accent, &.mat-warn, &[disabled] {
&[disabled] {
$palette: if($property == 'color', $foreground, $background);
#{$property}: mat-color($palette, disabled-button);
}
}
}
@mixin mat-button-theme($theme) {
$success: map-get($theme, success);
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.mat-button, .mat-icon-button {
background: transparent;
@include _mat-button-focus-color($theme);
@include _mat-button-theme-color($theme, 'color');
}可以在"theme.scss“文件中添加
和新的自定义变量
@import '~@angular/material/_theming';
@include mat-core();
$primary: mat-palette($mat-green);
$accent: mat-palette($mat-blue);
$warn: mat-palette($mat-blue);
$success: mat-palette($mat-blue);
$theme: mat-light-theme($success,$primary, $accent,$warn);
@include angular-material-theme($theme);
.dark-theme {
$dark-success: mat-palette($mat-light-blue);
$dark-primary: mat-palette($mat-light-blue);
$dark-accent: mat-palette($mat-green);
$dark-theme: mat-dark-theme($dark-success, $dark-primary, $dark-accent);
@include angular-material-theme($dark-theme);
}现在我们可以在
中使用新的变量：
<button md-button color="success">Primary</button>下面是modified _theming.scss https://plnkr.co/edit/gMAEyVjb0F7MCC1x6OKe?p=templates的链接
注意:在升级angular-material包时，我们需要注意"_theming.scss“文件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47455074
复制相关文章
相似问题
腾讯云开发者
