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

File

src/app/materials/message/message.component.ts

Implements

OnInit

Metadata

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

Index

Methods

Constructor

constructor()
Defined in src/app/materials/message/message.component.ts:8

Methods

ngOnInit
ngOnInit()
Defined in src/app/materials/message/message.component.ts:12
Returns : void 
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-message',
  templateUrl: './message.component.html',
  styleUrls: ['./message.component.scss']
})
export class MessageComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
Copy
<h3>message</h3>
<stbui-message label="紧急通知" sublabel="这是一条消息" color="primary" icon="info"></stbui-message>

<h3>message</h3>
<stbui-message label="紧急通知" sublabel="这是一条消息" color="accent" icon="warning"></stbui-message>

<h3>message</h3>
<stbui-message label="紧急通知" sublabel="这是一条消息" color="warn" icon="error"></stbui-message>

<h3>message</h3>
<mat-card style="padding: 0">
  <stbui-message label="紧急通知" sublabel="这是一条消息" color="primary" icon="info">
    <button stbui-message-actions mat-button>查看</button>
  </stbui-message>
</mat-card>

<h3>message</h3>
<mat-card style="padding: 0">
  <stbui-message #message label="紧急通知" sublabel="这是一条消息" color="primary" icon="info">
    <button stbui-message-actions mat-icon-button (click)="message.close()">
      <mat-icon>cancel</mat-icon>
    </button>
  </stbui-message>
</mat-card>
Copy

./message.component.scss 

:host {
  display: block;
  margin: 24px;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""