Can I use Plain Wizard instead of Modal Wizard?

Question

I am working on a wizard for vmware plugin that will require a lot of configurations. Somehow Modal Wizard is making the process slow, will that be all right to use Plain Wizard?

Plain Wizard looks like a Bootstrap 3 component. We do not recommend mixing the Bootstrap JS with @clr/angular If you can post an example for what you are trying with the Clarity Wizard I might be able to help you: stackblitz.com/edit/clarity-light-theme-v11 — hippeelee

wenzel wenzel · Accepted Answer · 2018-03-08T08:29:45

Are you using the Angular implementation? So there is the possibility to use the wizard not as a modal. It is a bit of a hack but with some additional styling I think it can work out for you.

Use the following attributes on your 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>

A full example:

<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>

And here is a discussion about that: https://github.com/vmware/clarity/issues/1483

Can I use Plain Wizard instead of Modal Wizard?

1 Answers