Skip to main content

Modal

Para que o serviço Modal funcione corretamente, é necessário seguir alguns pequenos passos.

Componente​

O Modal é dividido em duas estruturas: Serviço e Componente e para que funcione corretamente, ambas devem estar implementadas em seu código.

Começaremos com o com ponente, que é a base para o bom funcionamento: Inclua o a tag abaixo na página que chamará a modal, preencha os atributos e, entre as tags poderá adicionar qualquer conteúdo que deseje. É comum na área do content (entre as tags), includir todas as variações de conteúdo permitidas na tela e via variavel definir qual será exibida ou oculta.

Atributos da tag​

AtributoInput/OutputTipoObrigatórioValores padrões
cancelClick@OutputfunctionNão-
confirmClick@OutputfunctionSim-
cancelButtonText@InputStringSim-
confirmButtonText@InputStringSim-
cancelButtonText e confirmButtonText

Estes atributos devem ser preenchidos com o texto que será exibido nos botões

cancelClick e confirmClick

Os outputs são necessário para informar o que os botões de confirmação e cancelamento devem fazer. Para que a modal seja fechada após clicar neles, chame o método do serviço: close().

<ugl-modal
    (cancelClick)="cancel()"
    (confirmClick)="confirm()"
    [cancelButtonText]="'Cancel'"
    [confirmButtonText]="'Confirm'">

    <p>Text</p>

    </ugl-modal>
cancel() {
    this.modal.closeModal();
  }

confirm() {
  this.modal.closeModal();
}

O serviço​

Após adicionar a tag contendo os atributos, é hora de implementar o serviço e executar a abertura da modal. A modal oferece 4 métodos de abertura, ambos seguindo um padrão muito semelhantes:

this.modal.<type>(<title>, <message>, <Has Icon?>);

Warning​

this.modal.error(
  'Error',
  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, rem.',
  true
);

img

Error​

this.modal.warning(
  'Warning',
  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, rem.',
  true
);

img

Success​

this.modal.success(
  'Success',
  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, rem.',
  true
);

img

Info​

this.modal.info(
  'Info',
  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, rem.',
  true
);

img