如何从 Primary Palette 获取 hue/lighter 颜色
How to get hue/lighter color from Primary Palette
所以在 Angular Material 2 中,我设置了主题
$store-primary: mat-palette($mat-storecast);
$store-accent: mat-palette($mat-pink, A200, A100, A400);
// The warn palette is optional (defaults to red).
$store-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$store-theme: mat-light-theme($store-primary, $store-accent, $store-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($store-theme);
我无法从他们的文档中弄清楚如何从主调色板(即按钮上的工具栏)获取不同的色调。
<button md-mini-fab (click)="zoomIn()" color="primary">
<md-icon>add</md-icon>
</button>
它似乎只理解 color=primary 或 color=accent 等。你如何指定我想使用 primary-100 或 primary-500 等?
我用的是angular-material 1,不知道是不是一样,不过我是用指令:md-colors="::{background: 'themename-primary-100'}"
当然在themename
你输入主题名称 :P
官方给出的回答是目前不可以。大多数组件上可用的 color
属性只接受调色板类型 - 即 primary、accent 或 warn。
如果您真的想这样做,非官方的答案是,如果您不介意滥用内部 API,则可以(逐个组件地)。例如,要在按钮上获得 A100 颜色,您可以将自定义混合添加到您的主题中。
// custom-button-theme.scss
@import '~@angular/material/core/theming/all-theme';
@import '~@angular/material/button/_button-theme';
@mixin custom-button-theme($theme) {
.mat-raised-button.a100, .mat-fab.a100, .mat-mini-fab.a100 {
// _mat-button-theme-color is a mixin defined in _button-theme.scss
// which applies the given property, in this case background-color
// for each of the palettes - i.e. primary, accent and warn.
// The last parameter is the hue colour to apply.
@include _mat-button-theme-color($theme, 'background-color', 'A100');
}
}
然后在主主题文件中导入自定义 mixin。
@import 'custom-button-theme.scss';
@include custom-button-theme($store-theme);
然后您的按钮可以通过添加 a100
class.
使用颜色
<button md-mini-fab (click)="zoomIn()" color="primary" class="a100">
<md-icon>add</md-icon>
</button>
但请务必注意,内部 API 可能随时更改。此代码已使用版本 2.0.0-beta.2 进行测试 - 不能保证它在 beta 3 发布时可以使用。
对我来说,我通过在组件 scss 中创建自定义 mixin 来解决这个问题。在这个 mixin 中,您可以通过调用 map-get 方法来使用原色。您需要在您的 styles.scss(您包含 angular-material-theme 的位置)中包含 mixin 才能完成这项工作。请参阅下面的示例。
从您的组件 scss 创建自定义混合:
@import '~@angular/material/theming';
@mixin custom-component($theme) {
$primary: map-get($theme, primary);
mat-toolbar{
&.p100{
background-color: mat-color($primary, 100);
}
}
}
将模板中的工具栏设置为 class 'p100':
<mat-toolbar class="p100"></mat-toolbar>
最后在您的 styles.scss 中包含 mixin,以便 mixin 包含在您的主题中:
@import 'PATH_TO_YOUR_COMPONENT/custom-component.scss'; <--------- import the custom mixin
$store-primary: mat-palette($mat-storecast);
$store-accent: mat-palette($mat-pink, A200, A100, A400);
// The warn palette is optional (defaults to red).
$store-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$store-theme: mat-light-theme($store-primary, $store-accent, $store-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include custom-component($store-theme); <--------- Include it before you include angular-material-theme
@include angular-material-theme($store-theme);
所以在 Angular Material 2 中,我设置了主题
$store-primary: mat-palette($mat-storecast);
$store-accent: mat-palette($mat-pink, A200, A100, A400);
// The warn palette is optional (defaults to red).
$store-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$store-theme: mat-light-theme($store-primary, $store-accent, $store-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($store-theme);
我无法从他们的文档中弄清楚如何从主调色板(即按钮上的工具栏)获取不同的色调。
<button md-mini-fab (click)="zoomIn()" color="primary">
<md-icon>add</md-icon>
</button>
它似乎只理解 color=primary 或 color=accent 等。你如何指定我想使用 primary-100 或 primary-500 等?
我用的是angular-material 1,不知道是不是一样,不过我是用指令:md-colors="::{background: 'themename-primary-100'}"
当然在themename
你输入主题名称 :P
官方给出的回答是目前不可以。大多数组件上可用的 color
属性只接受调色板类型 - 即 primary、accent 或 warn。
如果您真的想这样做,非官方的答案是,如果您不介意滥用内部 API,则可以(逐个组件地)。例如,要在按钮上获得 A100 颜色,您可以将自定义混合添加到您的主题中。
// custom-button-theme.scss
@import '~@angular/material/core/theming/all-theme';
@import '~@angular/material/button/_button-theme';
@mixin custom-button-theme($theme) {
.mat-raised-button.a100, .mat-fab.a100, .mat-mini-fab.a100 {
// _mat-button-theme-color is a mixin defined in _button-theme.scss
// which applies the given property, in this case background-color
// for each of the palettes - i.e. primary, accent and warn.
// The last parameter is the hue colour to apply.
@include _mat-button-theme-color($theme, 'background-color', 'A100');
}
}
然后在主主题文件中导入自定义 mixin。
@import 'custom-button-theme.scss';
@include custom-button-theme($store-theme);
然后您的按钮可以通过添加 a100
class.
<button md-mini-fab (click)="zoomIn()" color="primary" class="a100">
<md-icon>add</md-icon>
</button>
但请务必注意,内部 API 可能随时更改。此代码已使用版本 2.0.0-beta.2 进行测试 - 不能保证它在 beta 3 发布时可以使用。
对我来说,我通过在组件 scss 中创建自定义 mixin 来解决这个问题。在这个 mixin 中,您可以通过调用 map-get 方法来使用原色。您需要在您的 styles.scss(您包含 angular-material-theme 的位置)中包含 mixin 才能完成这项工作。请参阅下面的示例。
从您的组件 scss 创建自定义混合:
@import '~@angular/material/theming';
@mixin custom-component($theme) {
$primary: map-get($theme, primary);
mat-toolbar{
&.p100{
background-color: mat-color($primary, 100);
}
}
}
将模板中的工具栏设置为 class 'p100':
<mat-toolbar class="p100"></mat-toolbar>
最后在您的 styles.scss 中包含 mixin,以便 mixin 包含在您的主题中:
@import 'PATH_TO_YOUR_COMPONENT/custom-component.scss'; <--------- import the custom mixin
$store-primary: mat-palette($mat-storecast);
$store-accent: mat-palette($mat-pink, A200, A100, A400);
// The warn palette is optional (defaults to red).
$store-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$store-theme: mat-light-theme($store-primary, $store-accent, $store-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include custom-component($store-theme); <--------- Include it before you include angular-material-theme
@include angular-material-theme($store-theme);