Question

我正在使用来自清晰设计框架的clr-wizard来处理有角的6个项目。

我在clr-wizard中有2个步骤，如下面的代码所示。

<clr-wizard>
    <clr-wizard-page [clrWizardPageNextDisabled]="!stepFirstNextButtonEnable">
        <ng-template clrPageTitle>Platforms</ng-template>
        <ng-container>
            ....
        </ng-container>
        <ng-template clrPageButtons>
            <clr-wizard-button class="custom-btn-primary" [type]="'custom-next-step-first'">NEXT</clr-wizard-button>
        </ng-template>
    </clr-wizard-page>

    <clr-wizard-page [clrWizardPageNextDisabled]="!stepSecondNextButtonEnable">
        <ng-template clrPageTitle>Platforms</ng-template>
        <ng-container>
            ....
        </ng-container>
        <ng-template clrPageButtons>
            <clr-wizard-button class="custom-btn-primary" [type]="'custom-next-step-second'">NEXT</clr-wizard-button>
        </ng-template>
    </clr-wizard-page>
</clr-wizard>

我必须在每个步骤中使用自定义NEXT按钮，所以我使用<ng-template clrPageButtons></ng-template>，并且我使用[clrWizardPageNextDisabled]来使按钮在每个步骤中都无效。

在第一步中，禁用按钮需要几天的时间。现在那行不通了。

如果我们删除自定义按钮<ng-template clrPageButtons>

参考：

https://vmware.github.io/clarity/documentation/v0.13/wizards

Answer 1

您的自定义按钮的type应该是next或custom-next：

<clr-wizard-button type="custom-next">NEXT</clr-wizard-button>

Forker Stackblitz

清晰度clr-wizard的“禁用”按钮不起作用

1 个答案: