pfWizard
patternfly.wizard
Directive for rendering a Wizard modal. Each wizard dynamically creates the step navigation both in the header and the left-hand side based on nested steps.
Use the pf-wizardstep to define individual steps within a wizard and pf-wizardsubstep to define portions of pf-wizardsteps if so desired. For instance, Step one can have two substeps - 1A and 1B when it is logical to group those together.
The basic structure should be:
<div pf-wizard> <div pf-wizardstep> <div pf-wizardsubstep><!-- content here --></div> <div pf-wizardsubstep><!-- content here --></div> </div> <div pf-wizardstep><!-- additional configuration can be added here with substeps if desired --></div> <div pf-wizardstep><!-- review steps and final command here --></div> </div>
<ANY pf-wizard title="{string}" [hide-indicators="{boolean}"] [hide-sidebar="{boolean}"] [hide-header="{boolean}"] [hide-back-button="{boolean}"] [step-class="{string}"] [sidebar-class="{string}"] [content-height="{string}"] [current-step="{string}"] [cancel-title="{string}"] [back-title="{string}"] [next-title="{string}"] [back-callback="{function(step)}"] [next-callback="{function(step)}"] [on-finish="{function()}"] [on-cancel="{function()}"] wizard-ready="{boolean}" [wizard-done="{boolean}"] loading-wizard-title="{string}" [loading-secondary-information="{string}"] [embed-in-page="{boolean}"]> ... </ANY>
Param | Type | Details |
---|---|---|
title | string | The wizard title displayed in the header |
hideIndicators (optional) | boolean | Hides the step indicators in the header of the wizard |
hideSidebar (optional) | boolean | Hides page navigation sidebar on the wizard pages |
hideHeader (optional) | boolean | Optional value to hide the title bar. Default is false. |
hideBackButton (optional) | boolean | Optional value to hide the back button, useful in 2 step wizards. Default is false. |
stepClass (optional) | string | Optional CSS class to be given to the steps page container. Used for the sidebar panel as well unless a sidebarClass is provided. |
sidebarClass (optional) | string | Optional CSS class to be give to the sidebar panel. Only used if the stepClass is also provided. |
contentHeight (optional) | string | The height the wizard content should be set to. This is used ONLY if the stepClass is not given. This defaults to 300px if the property is not supplied. |
currentStep (optional) | string | The current step can be changed externally - this is the title of the step to switch the wizard to |
cancelTitle (optional) | string | The text to display on the cancel button |
backTitle (optional) | string | The text to display on the back button |
nextTitle (optional) | string | The text to display on the next button |
backCallback (optional) | function(step | Called to notify when the back button is clicked |
nextCallback (optional) | function(step | Called to notify when the next button is clicked |
onFinish (optional) | function() | Called to notify when when the wizard is complete. Returns a boolean value to indicate if the finish operation is complete |
onCancel (optional) | function() | Called when the wizard is canceled, returns a boolean value to indicate if cancel is successful |
wizardReady | boolean | Value that is set when the wizard is ready |
wizardDone (optional) | boolean | Value that is set when the wizard is done |
loadingWizardTitle | string | The text displayed when the wizard is loading |
loadingSecondaryInformation (optional) | string | Secondary descriptive information to display when the wizard is loading |
embedInPage (optional) | boolean | Value that indicates wizard is embedded in a page (not a modal). This moves the navigation buttons to the left hand side of the footer and removes the close button. |