如何解决在星云步进器的任何一步中移动
我在 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>
然后您可以在按钮内添加一个功能,以在您的步骤之间导航到您想要的任何位置
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。