MDB 6 - Updated Stepper - Material Design for Bootstrap

Topic: MDB 6 - Updated Stepper

londoh pro asked 5 years ago

I have a complex form within a stepper using 5.8.3.

In order to avoid a long unwieldy component I've broken the form down into separate form components as per the (simplified) snippet included here. This has worked well.

I feel I should probably update 5.8.3 to 6. at this point, but am concerned about the stepper. I haven't really looked in depth at rewriting it yet, but I wondered if devs/anyone has any advice to update stepper to 6.0.0 and specifically re continuing to use my existing form partials, or using some other method of breaking the form into separate files.

Thank you.

Resources (screenshots, code snippets etc.)

<stepper
    buttons
    within
    :submit-function="onSubmit"
    next-btn="Next Step"
    prev-btn="Previous"
    submit-btn="Submit Entry"
    validation
    :validatedSteps="validatedSteps"
    @validate="validate"
>
<mdb-step
        slot="content"
        name="User Details"
        icon="user"
        :number="1"
>
    <step-user
            :form="form"
            title="User Details"
        />
</mdb-step>

<mdb-step
        slot="content"
        name="Address"
        icon="building"
        :number="2"
>
    <step-address
            :form="form"
            :counties="this.getCounties"
            title="Address"
    />
</mdb-step>

Add comment

Magdalena Dembna staff premium answered 5 years ago

0 0 Best answer

Take a look at within example: https://mdbootstrap.com/docs/vue/components/stepper/#within . First, what you need to do it add :steps="2" property - it will create the given number of named slots. If you want to add name field, use the array instead of number (:steps="[{name: "Step 1"}, {name: Step2}]"). Then, replace mdb-step with the template tag corresponding to the named slot (f.e <template #1> YOUR CONTENT </template> will be the first step, #2 the second, etc). You no longer have to pass a function as a property - component emits submit event. Customizing buttons (text, colour) goes through options object. You can find more details about all available options in the API tab (Stepper Within). As for using your custom components within the stepper - just nest them between template tags. Kind regards, Magdalena