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. Formulário

Stepper

Uso

page-stepper.component.html
<cat-toolbar [config]="getToolbarInfo()"></cat-toolbar>

<cat-stepper #stepper>
  <cat-step label="First Step">
    <div content>First</div>
    <nav actions>
      <cat-primary-button (click)="stepper.next()">Próximo</cat-primary-button>
    </nav>
  </cat-step>
  <cat-step label="Second Step">
    <div content>Second</div>
    <nav actions>
      <cat-secondary-button class="mr-5" (click)="stepper.previous()">Voltar</cat-secondary-button>
      <cat-primary-button (click)="stepper.next()">Próximo</cat-primary-button>
    </nav>
  </cat-step>
  <cat-step label="Third Step">
    <div content>Third</div>
    <nav actions>
      <cat-secondary-button (click)="stepper.previous()">Voltar</cat-secondary-button>
    </nav>
  </cat-step>
</cat-stepper>
page-stepper.component.ts
import { Component } from '@angular/core';
import { CatComponentBase } from '@catrx/ui/common';

@Component({
  templateUrl: './page-stepper.component.html',
})
export class PageStepperComponent extends CatComponentBase {}
page-stepper.module.ts
import { NgModule } from '@angular/core';
import { PageStepperComponent } from './page-stepper.component';
import { CatToolbarModule } from '@catrx/ui/toolbar';
import { CatStepperModule } from '@catrx/ui/stepper';
import { CatPrimaryButtonComponent } from '@catrx/ui/button/primary';
import { CatSecondaryButtonComponent } from '@catrx/ui/button/secondary';
import { PageStepperRoutingModule } from './page-stepper.routing.module';

@NgModule({
  declarations: [PageStepperComponent],
  imports: [
    CatToolbarModule,
    CatStepperModule,
    CatPrimaryButtonComponent,
    CatSecondaryButtonComponent,
    PageStepperRoutingModule,
  ],
})
export class PageStepperModule {}

Overview

PreviousCampos PersonalizadosNextExpansive Panel

Last updated 2 years ago

Was this helpful?

CatUi
Logo