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

CatUi