Update stepper docs
parent
9d8e2cfd65
commit
02b4daead2
|
@ -1,6 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Stepper consists of one or more StepperPanel elements.</p>
|
<p>
|
||||||
|
Stepper consists of one or more StepperPanel elements to encapsulate each step in the progress. The elements to navigate between the steps are not built-in for ease of customization, instead <i>prevCallback</i> and
|
||||||
|
<i>nextCallback</i> events should be bound to your custom UI elements.
|
||||||
|
</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-content-center">
|
<div class="card flex justify-content-center">
|
||||||
<Stepper>
|
<Stepper>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Stepper is linear by default to enforce completion of a previus step to proceed, set <i>linear</i> as true for non-linear mode.</p>
|
<p>When <i>linear</i> property is present, current step must be completed in order to move to the next step.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-content-center">
|
<div class="card flex justify-content-center">
|
||||||
<Stepper linear>
|
<Stepper linear>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Each StepperPanel content can easily be customized with the default slot instead of using the built-in modes. Additionally, header, content, and separator sections of the StepperPanel are customizable via templating.</p>
|
<p>Stepper provides various templating options to customize the default UI design.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-content-center">
|
<div class="card flex justify-content-center">
|
||||||
<Stepper v-model:activeStep="active">
|
<Stepper v-model:activeStep="active">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Layout of the Stepper is configured with the <i>orientation</i> property that accepts <i>horizontal</i> and <i>vertical</i> as options.</p>
|
<p>Layout of the Stepper is configured with the <i>orientation</i> property that accepts <i>horizontal</i> and <i>vertical</i> as available options.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Stepper orientation="vertical">
|
<Stepper orientation="vertical">
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<DocComponent
|
<DocComponent
|
||||||
title="Vue Stepper Component"
|
title="Vue Stepper Component"
|
||||||
header="Stepper"
|
header="Stepper"
|
||||||
description="Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process."
|
description="The Stepper component displays a wizard-like workflow by guiding users through the multi-step progression."
|
||||||
:componentDocs="docs"
|
:componentDocs="docs"
|
||||||
:themingDocs="themingDoc"
|
:themingDocs="themingDoc"
|
||||||
:ptTabComponent="ptComponent"
|
:ptTabComponent="ptComponent"
|
||||||
|
|
Loading…
Reference in New Issue