Clarity clr-wizard 有禁用按钮不工作

Question

我正在为 angular 6 个项目使用清晰度设计框架中的 clr-wizard。

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

<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

Clarity clr-wizard 有禁用按钮不工作

Clarity clr-wizard have disable button not working

angular

vmware-clarity