{{ title }} {{ subtitle }}

{{ overviewIntro }}

{{ t.common.sectionDescription }}

{{ descriptionBody }}

{{ t.common.sectionFeatures }}
  • {{ featureOne }}
  • {{ featureTwo }}
  • {{ featureThree }}
{{ t.common.sectionLimitations }}
  • {{ limitOne }}
  • {{ limitTwo }}
  • {{ limitThree }}
Basic example
{{ isPt ? 'Formatos aceitos: pdf, doc. Tamanho máximo 2Mb' : 'Accepted formats: pdf, doc. Max file size 2Mb' }}
{{ isPt ? 'Formatos aceitos: pdf, doc. Tamanho máximo 2Mb' : 'Accepted formats: pdf, doc. Max file size 2Mb' }}
{{ isPt ? 'Resumo do fluxo' : 'Flow summary' }}
{{ isPt ? 'Nome:' : 'Name:' }} {{ basicName.isEmpty ? '-' : basicName }}
{{ isPt ? 'Posição:' : 'Position:' }} {{ basicPosition.isEmpty ? '-' : basicPosition }}
{{ isPt ? 'Empresa:' : 'Company:' }} {{ basicCompany.isEmpty ? '-' : basicCompany }}
{{ isPt ? 'Origem:' : 'Source:' }} {{ basicSource.isEmpty ? '-' : basicSource }}
{{ basicSubmittedLabel }} {{ basicSummary }}
Wizard with validation
{{ validationStatusLabel }} {{ validationStatus }}

{{ apiIntro }}

  • activeIndex e (activeIndexChange) permitem controle programático do passo atual.
  • beforeChange bloqueia a navegação para frente quando a aplicação precisar validar o passo corrente.
  • beforeFinish permite validar a etapa final antes do envio.
  • allowStepClick e linear controlam o comportamento de clique nos steps já visitados.
  • [headerTemplate] permite customizar o texto do cabeçalho mantendo o número e os ícones do wizard.
  • [actionsTemplate] permite substituir o rodapé padrão preservando os callbacks de navegação.
<li-wizard
  [previousLabel]="'Anterior'"
  [nextLabel]="'Próximo'"
  [finishLabel]="'Enviar'"
  [actionsTemplate]="wizardActionsTemplate"
  [beforeChange]="validateStep"
  (finish)="submitWizard($event)">
  <li-wizard-step
      title="Dados pessoais"
      [headerTemplate]="wizardStepHeaderTemplate">
    <input class="form-control" [(ngModel)]="name" name="name">
  </li-wizard-step>

  <li-wizard-step title="Confirmação" [error]="hasReviewError">
    <div class="alert alert-info">Revisão final</div>
  </li-wizard-step>
</li-wizard>