@unc-dsi/unc-wizard NPM

<unc-wizard>

<unc-wizard> is a wizard with stepper on top.

<unc-wizard>
    <unc-wizard-page label="User Info">
        <div>
            <h3>Some user info form</h3>
        </div>
        <vaadin-button slot="next" theme="primary">Next</vaadin-button>
    </unc-wizard-page>
    <unc-wizard-page label="Address">
        <div>
            <h3>Address form</h3>
        </div>
        <vaadin-button slot="left" theme="secondary">Previous</vaadin-button>
        <vaadin-button slot="right" theme="primary">Finish</vaadin-button>
    </unc-wizard-page>
</unc-wizard>

screenshot

Dependencies

Name	NPM	Usage
<vaadin-vertical-layout>		To arrange the wizard
<vaadin-horizontal-layout>		To arrange the wizard

Events

Name	Description
page-change	Fire when the displayed page changed. Contains indexes of the previous and the new current page: `detail: {previousIndex, currentIndex }`

Styling

Name	Default Lumo value	Default value	Description
--unc-wizard-margin	--lumo-space-m	1rem	Margin around the wizard
--unc-wizard-margin-top	--lumo-space-l	1.5rem	Margin on top of the wizard
--unc-wizard-border-color	--lumo-shade-10pct	hsla(214, 57%, 24%, 0.1)	Color of the border around the wizard
--unc-wizard-border-radius	--lumo-border-radius-l	0.5rem	Radius of the border around the wizard
--wizard-shadow	--lumo-box-shadow-s	0 2px 4px -1px hsla(214, 53%, 23%, 0.16), 0 3px 12px -1px hsla(214, 50%, 22%, 0.26	Shadow around the wizard