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

londoh pro answered 5 years ago

0 0 Best answer

Hi @Magdalena Dembna

thanks very much for your detailed input.

So I'll upgrade to 6 and refactor my stepper. I'll post here again if any more questions.

Add comment

Magdalena Dembna staff answered 5 years ago

0 0 Best answer

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

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Vue
MDB Version: 5.8.3
Device: any
Browser: all
OS: n/a
Provided sample code: No
Provided link: No

londoh

Pro User 287Support score
12Questions 21Answers 0Snippets