在星云步进器的任何一步中移动

问题描述

我在 Nebular 中使用 angular 2，我使用 stepper 有四个步骤，我如何使用步骤按钮移动到任何所需的步骤？之前没有选择步骤 ?，例如从 step 1 到 step 4 或从 step 1 到 step 3，但它不允许我执行这些操作。

对于这个例子，我将使用文档中的代码。 nbsteppercomponent

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,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,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,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 {}

解决方法

您需要禁用线性模式添加此代码：

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

然后您可以在按钮内添加一个功能，以在您的步骤之间导航到您想要的任何位置

angular angular nebula nebular