Wizard Classic

The Wizard Classic component provides a step-by-step interface for guiding users through multi-step processes or forms. It features customizable navigation buttons, page transitions, and various styling options.

Usage

Basic Usage

<div data-role="wizard-classic">
    <div class="page">Page 1 Content</div>
    <div class="page">Page 2 Content</div>
    <div class="page">Page 3 Content</div>
</div>

Plugin Parameters

Parameter	Type	Default	Description
buttons	string	"next, prev, finish, cancel, help"	Comma-separated list of buttons to display
startPage	number	1	The initial page to show (1-based index)
height	number	300	Height of the wizard in pixels
labelNext	string	""	Custom label for the Next button
labelPrev	string	""	Custom label for the Previous button
labelHelp	string	""	Custom label for the Help button
labelFinish	string	""	Custom label for the Finish button
labelCancel	string	""	Custom label for the Cancel button
iconNext	string	""	HTML for the Next button icon
iconPrev	string	""	HTML for the Previous button icon
iconHelp	string	""	HTML for the Help button icon
iconFinish	string	""	HTML for the Finish button icon
iconCancel	string	""	HTML for the Cancel button icon
clsWizard	string	""	Additional CSS class for the wizard container
clsPage	string	""	Additional CSS class for wizard pages
clsActions	string	""	Additional CSS class for the actions container
clsActionHelp	string	""	Additional CSS class for the Help button
clsActionPrev	string	""	Additional CSS class for the Previous button
clsActionNext	string	""	Additional CSS class for the Next button
clsActionFinish	string	""	Additional CSS class for the Finish button
clsActionCancel	string	""	Additional CSS class for the Cancel button

Events

Event	Description
onBeforePage	Fires before changing the page. Return false to prevent page change.
onPage	Fires when the page changes
onNext	Fires when the Next button is clicked
onPrev	Fires when the Previous button is clicked
onFinish	Fires when the Finish button is clicked
onCancel	Fires when the Cancel button is clicked
onHelp	Fires when the Help button is clicked
onWizardCreate	Fires when the component is created

API Methods

• next() - Navigate to the next page.
• prev() - Navigate to the previous page.
• destroy() - Destroy the component and remove it from the DOM.

Example of Method Usage

const wizard = Metro.getPlugin('#myWizard', 'wizard-classic');
wizard.next();

You can also use jQuery-style access:

$(element).data('wizard-classic').next();

Styling with CSS Variables

Variable	Default (Light)	Dark Mode	Description
--wizard-classic-border-color	#f3f3f3	-	Border color of the wizard
--wizard-classic-background	#ffffff	-	Background color of the wizard
--wizard-classic-color	#191919	-	Text color of the wizard

Example of Custom Styling

#my-wizard {
    --wizard-classic-border-color: #dcdcdc;
    --wizard-classic-background: #f8f8f8;
    --wizard-classic-color: #333333;
}

Available CSS Classes

Base Classes

• .wizard-classic - Main container class (automatically added)
• .wizard-pages - Container for pages
• .page - Individual page class

State Classes

• .active - Applied to the currently visible page
• .out - Applied to a page that’s being moved out
• .disabled - Applied to buttons that are disabled in the current state

Button Classes

• .wizard-actions - Container for action buttons
• .wizard-help - Help button
• .wizard-prev - Previous button
• .wizard-next - Next button
• .wizard-finish - Finish button
• .wizard-cancel - Cancel button

Example

<div data-role="wizard-classic"
     data-cls-page="d-flex flex-center"
     data-on-help="alert('Help Pressed!')"
     data-on-cancel="alert('Cancel Pressed!')"
     data-on-finish="alert('Finish Pressed!')"
     data-icon-help="<span class='mif-help'>">
    <div class="page">Page 1</div>
    <div class="page">Page 2</div>
    <div class="page">Page 3</div>
    <div class="page">Page 4</div>
</div>