P
CUI v1.20.1177
Documentation and examples in using Stepper Component with PCUI
<href="~/PCUIAssets/PCUI/Components/Stepper/css/Stepper.min.css" rel="stylesheet" />
<script src="~/PCUIAssets/PCUI/Components/Stepper/js/Stepper.js">
<pcui_stepper_component ref="stepperSample1"
v-bind:steps-callback="stepsValidation1"
v-bind:steps-cancel-callback="cancelEvent"
v-bind:steps="steps1"
v-bind:vertical="false"
v-bind:alt-labels="false">
<div slot="step1">Step 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nulla elit, interdum at turpis ut, iaculis accumsan enim. Aenean euismod ipsum tempor, aliquam ipsum sit amet, posuere justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut sodales dui, in semper erat. Proin ac nisl lectus. Sed vel ex convallis, facilisis odio vel, interdum nunc. Maecenas consectetur sagittis arcu sed fermentum. Praesent hendrerit accumsan mauris sed congue. Donec lacinia condimentum placerat. Curabitur quis dui dictum, lacinia lacus a, pellentesque nunc. Phasellus ac luctus sem.</div>
<div slot="step2">Step 2 Suspendisse convallis nisi erat, at posuere risus consequat volutpat. Aenean porttitor sed velit id eleifend. Maecenas ultricies ex sed purus gravida cursus. Vivamus sed ornare leo, at condimentum lacus. Donec imperdiet vestibulum cursus. Phasellus eu vulputate lectus. Maecenas eget euismod orci, a ultrices neque. Pellentesque consequat diam eu augue semper fermentum. Ut ac hendrerit ex, nec rutrum enim. Sed et tempor sapien.</div>
<div slot="step3">Step 3 Duis vel hendrerit metus. Nulla facilisi. Pellentesque lorem nisi, pulvinar quis mattis feugiat, viverra ut lacus. Praesent ac ullamcorper dolor. Duis ullamcorper, quam ut rhoncus mattis, odio nisl mattis nisi, eu mattis quam nulla nec justo. Nulla facilisi. Aliquam justo magna, volutpat vel turpis nec, auctor vulputate turpis. Nullam nec elit in orci venenatis facilisis.</div>
<div slot="step4">Step 4 Vivamus suscipit scelerisque nisi vel egestas. Cras nisi sapien, rutrum nec venenatis vel, aliquam non ipsum. Fusce id volutpat turpis. Duis scelerisque euismod turpis vel mattis. Aliquam eget vestibulum ipsum. Morbi vulputate pharetra leo ac viverra. Cras est ex, ultricies sed iaculis non, fringilla eu orci. Mauris sit amet pretium tortor. Morbi lacinia, elit ac sagittis pharetra, elit ex vehicula eros, et ultrices libero lacus sit amet massa. Cras a rhoncus odio.</div>
<pcui_stepper_component>
<pcui_stepper_component ref="stepperSample2"
v-bind:steps-callback="stepsValidation"
v-bind:steps-cancel-callback="cancelEvent"
v-bind:steps="steps2"
v-bind:vertical="true"
v-bind:alt-labels="false">
<div slot="step1">Step 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nulla elit, interdum at turpis ut, iaculis accumsan enim. Aenean euismod ipsum tempor, aliquam ipsum sit amet, posuere justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut sodales dui, in semper erat. Proin ac nisl lectus. Sed vel ex convallis, facilisis odio vel, interdum nunc. Maecenas consectetur sagittis arcu sed fermentum. Praesent hendrerit accumsan mauris sed congue. Donec lacinia condimentum placerat. Curabitur quis dui dictum, lacinia lacus a, pellentesque nunc. Phasellus ac luctus sem.</div>
<div slot="step2">Step 2 Suspendisse convallis nisi erat, at posuere risus consequat volutpat. Aenean porttitor sed velit id eleifend. Maecenas ultricies ex sed purus gravida cursus. Vivamus sed ornare leo, at condimentum lacus. Donec imperdiet vestibulum cursus. Phasellus eu vulputate lectus. Maecenas eget euismod orci, a ultrices neque. Pellentesque consequat diam eu augue semper fermentum. Ut ac hendrerit ex, nec rutrum enim. Sed et tempor sapien.</div>
<div slot="step3">Step 3 Duis vel hendrerit metus. Nulla facilisi. Pellentesque lorem nisi, pulvinar quis mattis feugiat, viverra ut lacus. Praesent ac ullamcorper dolor. Duis ullamcorper, quam ut rhoncus mattis, odio nisl mattis nisi, eu mattis quam nulla nec justo. Nulla facilisi. Aliquam justo magna, volutpat vel turpis nec, auctor vulputate turpis. Nullam nec elit in orci venenatis facilisis.</div>
<div slot="step4">Step 4 Vivamus suscipit scelerisque nisi vel egestas. Cras nisi sapien, rutrum nec venenatis vel, aliquam non ipsum. Fusce id volutpat turpis. Duis scelerisque euismod turpis vel mattis. Aliquam eget vestibulum ipsum. Morbi vulputate pharetra leo ac viverra. Cras est ex, ultricies sed iaculis non, fringilla eu orci. Mauris sit amet pretium tortor. Morbi lacinia, elit ac sagittis pharetra, elit ex vehicula eros, et ultrices libero lacus sit amet massa. Cras a rhoncus odio.</div>
<pcui_stepper_component>