1

我正在开发一个需要大量配置的 vmware 插件向导。不知何故，模态向导使过程变慢，可以使用普通向导吗？

4

1 回答 1

0

你在使用 Angular 实现吗？所以有可能使用向导而不是模式。这有点小技巧，但我认为它可以为你解决一些额外的样式。

在您的 clr-wizard 上使用以下属性： 

[clrWizardPreventModalAnimation]="true"
class="clr-wizard--inline clr-wizard--no-shadow clr-wizard--no-title"

<button class="btn btn-primary" (click)="wizard.open()">Inline wizard</button>

一个完整的例子：

<button class="btn btn-primary" (click)="wizard.open()">Inline Wizard</button>

<clr-wizard #wizard
    [(clrWizardOpen)]="open"
    [clrWizardSize]="'lg'"
    [clrWizardPreventModalAnimation]="true"
    class="clr-wizard--inline clr-wizard--no-shadow clr-wizard--no-title"
    style="height: 500px">

    <clr-wizard-title>Inline Wizard</clr-wizard-title>

    <clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button>
    <clr-wizard-button [type]="'previous'">Back</clr-wizard-button>
    <clr-wizard-button [type]="'next'">Next</clr-wizard-button>
    <clr-wizard-button [type]="'finish'">Submit</clr-wizard-button>

    <clr-wizard-page>
        <ng-template clrPageTitle>Page 1</ng-template> <!-- optional -->

        <p>Content for page 1</p>
        <p class="content-for-page-1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae minima inventore quia,
            officiis rem id explicabo incidunt, illum deleniti qui doloremque voluptatem, saepe tenetur
            quas! Quaerat explicabo expedita placeat vero.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae minima inventore quia,
            officiis rem id explicabo incidunt, illum deleniti qui doloremque voluptatem, saepe tenetur
            quas! Quaerat explicabo expedita placeat vero.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae minima inventore quia,
            officiis rem id explicabo incidunt, illum deleniti qui doloremque voluptatem, saepe tenetur
            quas! Quaerat explicabo expedita placeat vero.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae minima inventore quia,
            officiis rem id explicabo incidunt, illum deleniti qui doloremque voluptatem, saepe tenetur
            quas! Quaerat explicabo expedita placeat vero.
        </p>
    </clr-wizard-page>

    <clr-wizard-page>
        <ng-template clrPageTitle>Page 2</ng-template> <!-- mandatory -->

        <p>Content for page 2</p>
        <p class="content-for-page-2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae minima inventore quia,
            officiis rem id explicabo incidunt, illum deleniti qui doloremque voluptatem, saepe tenetur
            quas! Quaerat explicabo expedita placeat vero.
        </p>
    </clr-wizard-page>

    <clr-wizard-page>
        <ng-template clrPageTitle>Page 3</ng-template> <!-- mandatory -->

        <p class="content-for-page-3">Content for page 3</p>
    </clr-wizard-page>
</clr-wizard>

这是一个关于这个的讨论： https ://github.com/vmware/clarity/issues/1483

于 2018-03-08T08:29:45.620 回答