Wizard

<sw-wizard>

ready
Provides a wrapper to create a wizard modal. The wizard pages are placed in the default slot of the component. Dot navigation as well as the navigation buttons are dynamically within the wizard itself. Please use `sw-wizard-page` for the different wizard pages. When a more sophisticated wizard page is necessary, please extend the default `sw-wizard-page`.

Usage

Loading...
<sw-wizard :showDotNavigation="true">
    <sw-wizard-page title="Example #1">
        <h1>Example #1</h1>
    </sw-wizard-page>
    <sw-wizard-page title="Example #2">
        <h1>Example #2</h1>
    </sw-wizard-page>
    <sw-wizard-page title="Example #3">
        <h1>Example #3</h1>
    </sw-wizard-page>
</sw-wizard>

Component properties

Property name Type Default
showNavigationDots Boolean
activePage Number

Methods

Method name Parameters
mountedComponent No parameters
addPage component
removePage component
nextPage No parameters
previousPage No parameters
changePage newPageIndex
onClose No parameters

Imports

  • ./sw-wizard.scss
  • ./sw-wizard.html.twig

Twig blocks

  • sw_wizard_slot_default
  • sw_wizard_slot_footer_left_buttons_close
  • sw_wizard_slot_footer_left_buttons_back
  • sw_wizard_slot_footer_left_buttons
  • sw_wizard_slot_footer_dot_navigation
  • sw_wizard_slot_footer_right_button_finish
  • sw_wizard_slot_footer_right_button_next
  • sw_wizard_slot_footer_right_button
  • sw_wizard_slot_footer
  • sw_wizard

Slots

  • default
  • footer-left-button
  • footer-dot-navigation
  • footer-right-button