A component to quickly create a step-by-step wizard
<od-wizard> is a simple component that allows the user to define a set of pages to be displayed in an orderly fashion. The wizard allows users to progress to the first incomplete step and backtrack to any previous step. It provides a callback hook when the user has completed the wizard.
<od-wizard-page> is a simple component that allows the user to define a page name for od-wizard steps. It provides callback hooks for when the user loads the page andd when the user advances the page.
Required This is the title that the wizard will use to generate the navigation item
Properties
OD-Wizard
Attribute
Type
Default
Description
doneCallback
function
undefined
Params: od-wizard - this function will be called once the final step of the wizard returns true for its callback
OD-Wizard-Page
Attribute
Type
Default
Description
loadCallback
function
undefined
Params: od-wizard-page - this function will be called when the page is loaded
doneCallback
function
undefined
Params: od-wizard-page - this function will be called when the user hits the next button. It must return true or false to indicate to the wizard if it is allowed to progress to the next step.
Functions
OD-Wizard-Page
Name
Parameters
Description
executeLoad
None
Manually call the load function of the page with its scope pased through
executeDone
None
Manually call the done function of the page with its scope pased through
Styling
CSS variables are available to alter the default styling provided
OD-Wizard
Shadow Parts
Description
title-slot
The slot used to hold the Title item
nav-container
The div used to hold the nav and the pages container
nav
The actual navigation list
nav-item
The individual "links" in the navigation
nav-item-enabled
The enabled links in the navigation
nav-item-current
The current link/step in the navigation
pages-container
The div the holds the individual pages and gthe buttons container