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}"] [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}"] [content-height="{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 |
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 |
contentHeight (optional) | string | The height the wizard content should be set to. This defaults to 300px if the property is not supplied. |
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. |