src/app/materials/toast/toast.component.ts
| selector | app-toast |
| styleUrls | ./toast.component.scss |
| templateUrl | ./toast.component.html |
Properties |
Methods |
constructor(snackBar: MatSnackBar)
|
||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| showActionToast |
showActionToast()
|
|
Returns :
void
|
| showAlert |
showAlert()
|
|
Returns :
void
|
| showSimpleToast |
showSimpleToast()
|
|
Returns :
void
|
| action |
Type : boolean
|
Default value : false
|
| actionButtonLabel |
Type : string
|
Default value : '确定'
|
| addExtraClass |
Type : boolean
|
Default value : false
|
| durationHide |
Type : number
|
Default value : 10000
|
| message |
Type : string
|
Default value : 'I am Toast'
|
| setAutoHide |
Type : boolean
|
Default value : true
|
import { Component, OnInit } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material';
@Component({
selector: 'app-toast',
templateUrl: './toast.component.html',
styleUrls: ['./toast.component.scss']
})
export class ToastComponent implements OnInit {
message: string = 'I am Toast';
actionButtonLabel: string = '确定';
action: boolean = false;
setAutoHide: boolean = true;
durationHide: number = 10000;
addExtraClass: boolean = false;
constructor(private snackBar: MatSnackBar) {
}
ngOnInit() {
}
showSimpleToast() {
let config = new MatSnackBarConfig();
config.duration = this.durationHide;
this.snackBar.open(this.message, this.action && this.actionButtonLabel, config);
}
showActionToast() {
this.snackBar.open(this.message, this.actionButtonLabel);
}
showAlert() {
}
}
<mat-card>
<mat-card-title>Toast</mat-card-title>
<mat-card-content>
<button mat-raised-button color="primary" (click)="showSimpleToast()">
默认示例
</button>
<button mat-raised-button color="primary" (click)="showActionToast()">
带动作示例
</button>
</mat-card-content>
</mat-card>
./toast.component.scss
:host {
display: block;
}
mat-card {
margin: 20px;
}