Multistep

Component used to show progression thru a pre-determined process.

Used to wrap <r-step/> components and manage the actions.

Set the index that is active and provide an array of index for completed steps.

Usage

import { ref } from 'vue';
import { RMultistep } from '@rebilly/revel';

<r-multistep></r-multistep>;

You can bind to current and completed to programmatically determine what step is active.

import { ref } from 'vue';
import { RMultistep } from '@rebilly/revel';

const current = ref<string>('ready');
const completed = ref<string[]>(['pending']);

<r-multistep
    v-model:current="current"
    v-model:completed="completed"
></r-multistep>

Use the exposed nextStep, and prevStep functions to help navigate the steps.

import { ref } from 'vue';
import { RMultistep } from '@rebilly/revel';

const multistep = ref<RMultistep>();

multistep?.nextStep();
multistep?.prevStep(() => {
    console.log('Previous step triggered')
})

<r-multistep
    ref="multistep"
></r-multistep>

Multistep also exposes hasNextStep and hasPrevStep to help guard UI's

import { ref } from 'vue';
import { RMultistep, RButton } from '@rebilly/revel';

const multistep = ref<RMultistep>();

<r-button
    @click="multistep?.nextStep"
    :disabled="!multistep?.hasNextStep"
>
    Next
</r-button>

<r-button
    @click="multistep?.prevStep"
    :disabled="!multistep?.hasPrevStep"
>
    Previous
</r-button>

<r-multistep
    ref="multistep"
>
</r-multistep>

Name	Type	Default	Description
current	string	undefined	The initial value of the current step.
completed	Array, string	() => []	The initial list of completed steps.

Name	Description
update:current	v-model:current will two way bind the current step value.
update:completed	v-model:completed will two way bind the completed steps value.

Name	Description	Parameters	Returns
steps	All step indexes.		`string[]`: An array of step indexes.
hasNextStep	Indicates whether there is a next step available.		`boolean`: True if there is a next step, false otherwise.
hasPrevStep	Indicates whether there is a previous step available.		`boolean`: True if there is a previous step, false otherwise.
nextStep	Progress the step forward.	`callback` (() => void): called after the next step has been set.	`void`
prevStep	Reverse the step backward.	`callback` (() => void): called after the previous step has been set.	`void`

Multistep

Usage

API

Props

Events

Expose