Angular 2/4 如何设计有角度的材料设计小吃店 [英] Angular 2/4 How to style angular material design snackbar
问题描述
我是 Angular2/4 和 Angular 打字稿的新手.我想设计角度材料设计 snackbar 的样式,例如将背景颜色从黑色和字体颜色更改为其他颜色.
我如何设计小吃店"??
I am new to Angular2/4 and angular typescript. I want to style the angular material design snackbar for example change the background color from black and font color to something else.
How do i go about styling the "snackbar" ?
我在服务/核心中有材料设计小吃店,为了使其可用,我根据需要在每个组件中调用它.
I have the material design snackbar in the service/core and to make it available i call it in every component as needed.
如何在 Angular 2/4 中设置 Angular 2 材料设计snackbar"的样式?我已经包含了下面的代码片段:
How can I style the Angular 2 material design "snackbar"in Angular 2/4? I have included the code snippet below:
服务/核心
import { Injectable, Inject } from '@angular/core';
import { Observable } from 'rxjs/Observable'
import { DOCUMENT } from'@angular/platform-browser';
import { MdDialog, MdDialogRef } from '@angular/material';
import { MdDialogConfig, ComponentType } from '@angular/material';
import {MdSnackBar} from '@angular/material';
constructor(
public dialog: MdDialog,
public snackBar: MdSnackBar,
@Inject(DOCUMENT) public doc: any ) {
dialog.afterOpen.subscribe((ref: MdDialogRef<any>) => {
if (!doc.body.classList.contains('no-scroll')) {
doc.body.classList.add('no-scroll');
}
});
dialog.afterAllClosed.subscribe(() => {
doc.body.classList.remove('no-scroll');
}); }
openSnackBar(message: string, action?: string) {
this.snackBar.open(message, action, {
duration: 4000,
}); }
wiz.components.ts....
saveData(): void {
this.advisorClientModel.currentStep = this.currentStep;
this.advisorClientModel.clientId = this.faService.getClientId();
this.advisorClientModel.isMaxAmount = this.isMaximumAmount;
this.advisorClientModel.desiredLoanAmount = this.loanAmount;
this.advisorClientModel.maxLoanAmount = this.eligibleSelected.advanceAmount;
this.advisorClientModel.pledgedAccounts = this.getPledgedAccountsArray();
this.advisorClientModel.pledgedMarketValue = this.getPledgedMarkeValue();
this.faService.updateAdvisorClient( this.advisorClientModel )
.subscribe(
successModel => {
this.coreService.openSnackBar("Your Data Has been Saved");
this.navigateTo("fa/wiz" + (this.currentStep + 1));
},
error => {
this.onError(error);
}
);
}
推荐答案
md-snackbar
提供了一个服务来提供自定义的 config
.config
的属性之一是 extraClasses
,它允许将 CSS 类添加到小吃店容器 (doc).
md-snackbar
provides a service to provide custom config
. One the properties of config
is extraClasses
that allows to add CSS classes to the snack bar container (doc).
extraClasses
可以与 ::ng-deep
一起使用来覆盖默认的 CSS 类.举个例子:
extraClasses
can be used with ::ng-deep
to override the default CSS classes. Here's an example:
component.ts:
需要在组件中遵循以下import
:
Requires following import
in the component:
import {MdSnackBar, MdSnackBarConfig} from '@angular/material';
(提供自定义配置)
openSnackBar(message: string, action?: string) {
let config = new MdSnackBarConfig();
config.extraClasses = ['custom-class'];
this.snackBar.open(message, action ? 'Action Label' : undefined, config);
}
component.css:
::ng-deep snack-bar-container.custom-class {
background: yellow;
}
::ng-deep .custom-class .mat-simple-snackbar {
color: green;
}
如果您想尝试,这里有一个 Plunker 演示.
Here's a Plunker demo if you would like to try.
2018 年 11 月更新:Angular 6+
语法略有变化,md-
前缀被替换 mat-
和 extraClasses
被替换为 panelClass代码>.功能总体上是一样的:
The syntax has changed a bit, with the md-
prefix being replaced mat-
and extraClasses
was replaced with panelClass
. The function is overall the same though:
const config = new MatSnackBarConfig();
config.panelClass = ['custom-class'];
...
还有进口:
import { MatSnackBar, MatSnackBarConfig } from '@angular/material';
这篇关于Angular 2/4 如何设计有角度的材料设计小吃店的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!