我可以使用普通向导代替模态向导吗？答案

【问题标题】：Can I use Plain Wizard instead of Modal Wizard?我可以使用普通向导代替模态向导吗？
【发布时间】：2018-01-19 11:33:14
【问题描述】：

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

【问题讨论】：

普通向导看起来像一个 Bootstrap 3 组件。我们不建议将 Bootstrap JS 与 @clr/angular 混合使用

标签： user-interface wizard vmware-clarity

【解决方案1】：

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

在您的 clr 向导中使用以下属性：

[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

【讨论】：

谢谢，很有帮助。