Question

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

Answer 1

您使用的是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

我可以使用Plain Wizard而不是Modal Wizard吗？

1 个答案: