Improve this doc View source

pfWizard
directive in module patternfly.wizard

Description

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>

Usage

as attribute
<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>

Parameters

ParamTypeDetails
titlestring

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

wizardReadyboolean

Value that is set when the wizard is ready

wizardDone
(optional)
boolean

Value that is set when the wizard is done

loadingWizardTitlestring

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.

Example

Source























































Demo