Степпер

С чего начать

Подключите модуль:

import { QStepperModule } from '@diasoft/qpalette-visual';

Встройте компонент в верстку c помощью тегаq-stepper. Шаги задаются внутри тегаq-stepperс помощью теговq-step, для наименования шага используетсяlabel. Кастомный контент прописывается внутри тегаq-step:

***content 1***

***content 2***

***content 3***

Настройка степпера

Fluid

Растягивает степпер на всю длину родительского блока:

***content 1***

***content 2***

***content 3***

***content 4***

Progress

Растягивает степпер на всю длину родительского блока и добавляет прогрессбар:

***content 1***

***content 2***

***content 3***

***content 4***

Stacked

Прижимает степпер к левому краю и заполняет столько места, сколько необходимо:

***content 1***

***content 2***

***content 3***

***content 4***

Vertical

Задает степперу вертикальную ориентацию:

***content 1***

***content 2***

***content 3***

***content 4***

Reversed

Горизонтальный развернутый:

***content 1***

***content 2***

***content 3***

***content 4***

Вертикальный развернутый:

***content 1***

***content 2***

***content 3***

***content 4***

Настройка шагов

Default

Позволяет свободную кликать на любой шаг

***content 1***

***content 2***

***content 3***

***content 4***

Linear

Степпер становится линейным и следующий шаг откроется только по кнопке "Далее":

***content 1***

Далее

***content 2***

Назад Далее

***content 3***

Назад Далее

***content 4***

Назад Сброс

<q-stepper #linearStepper [type]="'progress'" stepsType="linear">
  <q-step label="Step 1">
    <p>***content 1***</p>
    <div class="q-flex">
      <button qButton (click)="goNext(linearStepper)">Далее</button>
    </div>
  </q-step>
 
  <q-step label="Step 2">
    <p>***content 2***</p>
    <div class="q-flex q-flex--jc-space-between">
      <button (click)="goPrev(linearStepper)" qButton>Назад</button>
      <button (click)="goNext(linearStepper)" qButton>Далее</button>
    </div>
  </q-step>
 
  <q-step label="Step 3">
    <p>***content 3***</p>
    <div class="q-flex q-flex--jc-space-between">
      <button (click)="goPrev(linearStepper)" qButton>Назад</button>
      <button (click)="goNext(linearStepper)" qButton>Далее</button>
    </div>
  </q-step>
 
  <q-step label="Step 4">
    <p>***content 4***</p>
    <div class="q-flex q-flex--jc-space-between">
      <button (click)="goPrev(linearStepper)" qButton>Назад</button>
      <button (click)="linearStepper.resetStepper()" color="danger" qButton>Сброс</button>
    </div>
  </q-step>
</q-stepper>

Disabled

Для установки состояния disabled добавьте в тег нужного Вам шага свойствоdisabled:

***content 1***

***content 2***

***content 3***

***content 4***

Ошибка

Для отображения ошибки в шаге добавьте в тег нужного Вам шага свойствоerror:

***content 1***

***content 2***

***content 3***

***content 4***

Кастомные иконки

Для установки кастомной иконки в шаг добавьте в тег нужного Вам шага свойствоicon:

***content 1***

***content 2***

***content 3***

***content 4***

Степпер с роутингом

Для использования степпера с роутингом достаточно передать свойствуrouterModelмассив с данными каждого шага.

<q-stepper [routerModel]="steps">
  <router-outlet></router-outlet>
</q-stepper>

Настройка шагов

Для настройки степпера из любого шага необходимо:

1. Указать id инпуту stepperId

2. В компонент шага подключить сервис QStepperService.
   Для управления состоянием шагов, а так же передачи данных между ними, методу setStepperState() нужно передать id степпера и объект, где ключём является индекс шага, а значением - объект с настройками.

   Также для дополнительной кастомизации шагов вне зависимости от их последовательности прохождения, достаточно в инпут progressType степпера передать значение 'step'.

* Данный подход можно использовать и в обычном степпере.

Роутинг

Осуществлять переход по шагам возможно двумя способами:

• Стандартным - кнопки переключения находятся в компоненте, где используется степпер.
  Данный способ описан выше

• Кастомным - кнопки переключения находятся внутри компонента шага.
  В этом варианте будет использоваться объект Router, в который нужно передать роутинг доступного для перехода шага. Для этого необходимо у сервиса QStepperService вызвать метод getProcesSteps('myStepperId'), который вернёт данные о следующем, предыдущем и активном шаге.

export class Step1Component implements OnInit {
 
  constructor(
    private router: Router,
    private qStepperService: QStepperService
  ) { }
 
  next(): void {
    const nextStep = this.qStepperService.getProcessSteps('myStepperId').nextStep.routerLink;
    this.router.navigate([`/development/qpalette-components/stepper/${nextStep}`]);
  }
 
  prev(): void {
    const prevStep = this.qStepperService.getProcessSteps('myStepperId').prevStep.routerLink;
    this.router.navigate([`/development/qpalette-components/stepper/${prevStep}`]);
  }
}

Пример

<q-stepper
  progressType="step"
  stepperId="myStepperId"
  type="progress"
  stepsType="default"
  orientation="horizontal"
  [routerModel]="steps"
>
  <router-outlet></router-outlet>
</q-stepper>

Свойства Stepper

Свойства Step

Методы QStepperService

Настройки для кастомизации шагов (stepTune)