angular-material-app documentation
  1. Components
  2. ToastComponent

File

src/app/materials/toast/toast.component.ts

Implements

OnInit

Metadata

selector app-toast
styleUrls ./toast.component.scss
templateUrl ./toast.component.html

Index

Properties
Methods

Constructor

constructor(snackBar: MatSnackBar)
Defined in src/app/materials/toast/toast.component.ts:16
Parameters :
Name Type Optional
snackBar MatSnackBar No

Methods

ngOnInit
ngOnInit()
Defined in src/app/materials/toast/toast.component.ts:21
Returns : void
showActionToast
showActionToast()
Defined in src/app/materials/toast/toast.component.ts:30
Returns : void
showAlert
showAlert()
Defined in src/app/materials/toast/toast.component.ts:34
Returns : void
showSimpleToast
showSimpleToast()
Defined in src/app/materials/toast/toast.component.ts:24
Returns : void

Properties

action
Type : boolean
Default value : false
Defined in src/app/materials/toast/toast.component.ts:13
actionButtonLabel
Type : string
Default value : '确定'
Defined in src/app/materials/toast/toast.component.ts:12
addExtraClass
Type : boolean
Default value : false
Defined in src/app/materials/toast/toast.component.ts:16
durationHide
Type : number
Default value : 10000
Defined in src/app/materials/toast/toast.component.ts:15
message
Type : string
Default value : 'I am Toast'
Defined in src/app/materials/toast/toast.component.ts:11
setAutoHide
Type : boolean
Default value : true
Defined in src/app/materials/toast/toast.component.ts:14
 
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() {
  }

}
Copy
<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>
Copy

./toast.component.scss 

:host {
  display: block;
}

mat-card {
  margin: 20px;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""