Multistep

Display steps to a pre-defined process. Track the completed and active steps.

Uses <r-multistep /> and <r-step /> components.

Usage

import { RMultistep, RStep } from '@rebilly/revel';

<r-multistep current="ready" :completed="['pending']">
    <r-step index="pending">
        <template #content>
            <p>Content for Step 1: Pending</p>
        </template>
    </r-step>
    <r-step index="ready">
        <template #content>
            <p>Content for Step 2: Ready</p>
        </template>
    </r-step>
    <r-step index="approved">
        <template #content>
            <p>Content for Step 3: Approved</p>
        </template>
    </r-step>
</r-multistep>

Example

multistep.vue