Cat UI
GitHub
  • Comece por aqui
    • 1. Instalação
      • Icones
      • Bootstrap
    • 2. Aplicando Tema
    • 3. Estrutura da aplicação
    • 4. Segurança
      • OpenID (Opcional)
      • Claims (Optional)
  • Menu
    • Sidenav
    • Toolbar
    • Dropdown
    • Tab
  • Exibição de Dados
    • Datatable
    • Componentes Dinâmicos
    • Exportação e Download de Dados
      • .csv
      • .xlsx
      • Visualizar .pdf
      • Download base64
    • Chip
  • Formulário
    • Formulário Dinâmico
    • Lista de Itens
    • Campos Personalizados
    • Stepper
    • Expansive Panel
    • Filtro Sobre Demanda
  • Janelas e Alertas
    • Dialog
    • Confirm
    • Alert
    • Snackbar
    • SideWindow
    • Notifications
    • Tooltip
  • Loaders
    • Spinner
    • Loader Page
  • Botões
    • Button
  • Abstrações
    • ServiceBase
    • ComponentBase
    • CRUDComponentBase
    • FormBase
  • Guias
    • Criando uma Aplicação de CRUD
      • Criando Projeto
      • Estrutura
      • Tela de Login
      • Menu
      • Tela de Adoção
      • Serviço HTTP
      • Lista de Pets
      • Formulário de Cadastro e Edição
      • Excluir Pet
      • Conclusão
Powered by GitBook
On this page
  • Uso
  • Overview

Was this helpful?

  1. Janelas e Alertas

Dialog

Uso

dialog-example.component.ts
import { Component, Inject } from '@angular/core';
import { CatDialogRef, CatDialogService, CatDialogSize, CAT_DIALOG_DATA } from '@catrx/ui/dialog';
import { CatFormService } from '@catrx/ui/form';

interface FormData {
  text: string;
  size: CatDialogSize;
}

@Component({
  templateUrl: './dialog-example.component.html',
})
export class DialogExampleComponent {
  formData: FormData;
  formConfig = this.formService
    .build<FormData>()
    .text('Inclua um texto para exibir no próximo Dialog', 'text', (builder) =>
      builder.generate()
    )
    .select('Tamanho do próximo Dialog', 'size', (builder) =>
      builder
        .setOptions([
          { value: 'small', name: 'Pequeno' },
          { value: 'medium', name: 'Médio' },
          { value: 'big', name: 'Grande' },
        ])
        .generate()
    )
    .onChange((value) => (this.formData = value))
    .generate();

  constructor(
    @Inject(CAT_DIALOG_DATA) public data: string,
    private dialogRef: CatDialogRef<DialogExampleComponent>,
    private dialogService: CatDialogService,
    private formService: CatFormService
  ) {}

  openAnother() {
    this.dialogService.open(DialogExampleComponent, {
      size: this.formData?.size,
      data: this.formData?.text,
    });
  }

  close() {
    this.dialogRef.close('showAlert');
  }
}
dialog-example.component.html
<cat-dialog>
  <div header>Dialog</div>
  <div content>
    <span>{{data}}</span>
    <cat-form class="d-block mt-10" [config]="formConfig"></cat-form>
  </div>
  <div actions>
    <button (click)="close()" type="button" class="btn btn-secondary btn-sm mr-8">
      Fechar
    </button>
    <button (click)="openAnother()" type="button" class="btn btn-primary btn-sm">
      Abrir outro
    </button>
  </div>
</cat-dialog>
page-dialog.component.ts
import { Component } from '@angular/core';
import { CatComponentBase } from '@catrx/ui/common';
import { CatDialogService } from '@catrx/ui/dialog';
import { DialogExampleComponent } from './dialog-example.component';

@Component({
  templateUrl: './page-dialog.component.html'
})
export class PageDialogComponent extends CatComponentBase {
  constructor(private dialogService: CatDialogService) {
    super();
  }

  public open() {
    this.dialogService.open(DialogExampleComponent, {
      size: 'small',
      closeTrigger: 'showAlert',
      callbackCloseTrigger() {
        alert('Callback ao fechar.');
      },
    });
  }
}
page-dialog.component.html
<cat-toolbar [config]="getToolbarInfo()">
  <nav buttons>
    <button (click)="open()" class="btn btn-primary btn-sm">
      Abrir Dialog
    </button>
  </nav>
</cat-toolbar>
page-dialog.module.ts
import { NgModule } from '@angular/core';
import { PageDialogComponent } from './page-dialog.component';
import { CommonModule } from '@angular/common';
import { CatDialogModule } from '@catrx/ui/dialog';
import { PageDialogRoutingModule } from './page-dialog.routing.module';
import { CatToolbarModule } from '@catrx/ui/toolbar';
import { DialogExampleComponent } from './dialog-example.component';
import { CatFormModule } from '@catrx/ui/form';

@NgModule({
  declarations: [PageDialogComponent, DialogExampleComponent],
  imports: [
    CommonModule,
    CatToolbarModule,
    CatDialogModule,
    CatFormModule,
    PageDialogRoutingModule,
  ],
})
export class PageDialogModule {}

Overview

PreviousFiltro Sobre DemandaNextConfirm

Last updated 2 years ago

Was this helpful?

CatUi
Logo