Snackbar

O snackbar é um componente de alertas no formato de balão de notificação, onde poderá optar entre sucesso, alerta, error e informação.

Uso

page-snackbar.component.ts

<cat-toolbar [config]="getToolbarInfo()">
  <nav buttons>
    <cat-success-button class="mr-8" (click)="openSnackbar('success')">Sucesso</cat-success-button>
    <cat-warning-button class="mr-8" (click)="openSnackbar('warning')">Atenção</cat-warning-button>
    <cat-danger-button class="mr-8" (click)="openSnackbar('error')">Error</cat-danger-button>
    <cat-info-button (click)="openSnackbar('info')">Informação</cat-info-button>
  </nav>
</cat-toolbar>

page-snackbar.component.ts

import { Component } from '@angular/core';
import { CatComponentBase } from '@catrx/ui/common';
import { CatSnackbarService, CatSnackbarType } from '@catrx/ui/snackbar';

@Component({
  templateUrl: './page-snackbar.component.html'
})
export class PageSnackbarComponent extends CatComponentBase {
  constructor(private snackbarService: CatSnackbarService) {
    super();
  }

  openSnackbar(type: CatSnackbarType) {
    this.snackbarService.open({
      type,
      title: 'Título do Snackbar',
      message: `Mensagem do <b>Snackbar</b>`,
      openedTime: 10000
    });
  }
}

page-snackbar.module.ts

import { NgModule } from "@angular/core";
import { CatSuccessButtonComponent } from '@catrx/ui/button/seccess';
import { CatWarningButtonComponent } from '@catrx/ui/button/warning';
import { CatDangerButtonComponent } from '@catrx/ui/button/danger';
import { CatInfoButtonComponent } from '@catrx/ui/button/info';
import { CatToolbarModule } from "@catrx/ui/toolbar";
import { PageSnackbarComponent } from "./page-snackbar.component";
import { PageSnackbarRoutingModule } from "./page-snackbar.routing.module";

@NgModule({
  declarations: [PageSnackbarComponent],
  imports: [
    CatToolbarModule,
    CatSuccessButtonComponent,
    CatWarningButtonComponent,
    CatDangerButtonComponent,
    CatInfoButtonComponent,
    PageSnackbarRoutingModule,
  ],
})
export class PageSnackbarModule {}

Overview

https://cat-ui.igordrangel.com.br/components/snackbarcat-ui.igordrangel.com.br