在星雲步進器的任何一步中移動

Question

我在angular 2中使用Nebular ，我正在使用帶有四個步驟的stepper ，如何使用步驟的按鈕移動到任何所需的步驟？ 之前沒有選擇過這些步驟？例如從step 1 step 4或從step 1到step 3 ，但它不允許我執行這些操作。

對於此示例，我將使用文檔中的代碼。 nbstepper 組件

import { Component } from '@angular/core';

@Component({
  template: `
    <nb-card>
      <nb-card-body>
        <nb-stepper orientation="horizontal" disableStepNavigation>
          <nb-step [label]="labelOne">
            <ng-template #labelOne>First step</ng-template>
            <h4>Step content #1</h4>
            <p class="lorem">
              Lorizzle ipsum dolizzle stuff fizzle, consectetuer adipiscing break it down.
              Nullizzle sapien velizzle, my shizz pimpin', shizzle my nizzle crocodizzle shut the shizzle up,
              gravida vizzle, dang.
            </p>
            <button class="prev-button" nbButton disabled nbStepperNext>prev</button>
            <button class="next-button" nbButton nbStepperNext>next</button>
          </nb-step>
          <nb-step [label]="labelTwo">
            <ng-template #labelTwo>Second step</ng-template>
            <h4>Step content #2</h4>
            <p class="lorem">
              Lorizzle ipsum dolizzle stuff fizzle, consectetuer adipiscing break it down.
              Nullizzle sapien velizzle, my shizz pimpin', shizzle my nizzle crocodizzle shut the shizzle up,
              gravida vizzle, dang.
            </p>
            <button class="prev-button" nbButton nbStepperPrevious>prev</button>
            <button class="next-button" nbButton nbStepperNext>next</button>
          </nb-step>
          <nb-step label="Third step">
            <h4>Step content #3</h4>
            <p class="lorem">
              Lorizzle ipsum dolizzle stuff fizzle, consectetuer adipiscing break it down.
              Nullizzle sapien velizzle, my shizz pimpin', shizzle my nizzle crocodizzle shut the shizzle up,
              gravida vizzle, dang.
            </p>
            <button class="prev-button" nbButton nbStepperPrevious>prev</button>
            <button class="next-button" nbButton nbStepperNext>next</button>
          </nb-step>
          <nb-step [label]="labelFour">
            <ng-template #labelFour>Fourth step</ng-template>
            <h4>Step content #4</h4>
            <p class="lorem">
              Lorizzle ipsum dolizzle stuff fizzle, consectetuer adipiscing break it down.
              Nullizzle sapien velizzle, my shizz pimpin', shizzle my nizzle crocodizzle shut the shizzle up,
              gravida vizzle, dang.
            </p>
            <button class="prev-button" nbButton nbStepperPrevious>prev</button>
            <button class="next-button" nbButton disabled nbStepperNext>next</button>
          </nb-step>
        </nb-stepper>
      </nb-card-body>
    </nb-card>
  `,
  styleUrls: ['./stepper-disabled-step-nav.component.scss'],
})
export class StepperDisabledStepNavComponent {}

Answer 1

您需要禁用線性模式添加此代碼：

<nb-stepper [linear]=false orientation="horizontal" disableStepNavigation>

然后你可以在你的按鈕內添加一個 function 在你的步驟之間導航到任何你想要的地方