td-message
element generates an inline message with an icon, color, label and sublabel.
color
can be either with any theme color (primary
, accent
or warn
) But you can also set a color
from our lib and it can be applied in the component to get any material color not in the theme. (blue
, red
, etc)
info_outline
icon.purple
, light-blue
, etc.Import the [CovalentMessageModule] in your NgModule:
import { CovalentMessageModule } from '@covalent/core/message'; @NgModule({ imports: [ CovalentMessageModule, ... ], ... }) export class MyModule {}
Example for HTML usage:
<td-message #messageDemo color="primary" class="pad-sm" label="Hide me!" sublabel="You can toggle my visibility & add a class!"> <button td-message-actions mat-icon-button (click)="messageDemo.close()"><mat-icon>cancel</mat-icon></button> </td-message> <button mat-button color="accent" (click)="messageDemo.toggle()"> Toggle Visibility </button>