Improve this doc View source

pfWizard
directive in module patternfly.wizard

Deprecated API {string} title The wizard title displayed in the head (use wizardTitle instead)

Description

Component 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 pf-wizard-step to define individual steps within a wizard and pf-wizard-substep to define portions of pf-wizard-steps 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: 

<pf-wizard>
  <pf-wizard-step>
    <pf-wizard-substep><!-- content here --></pf-wizard-substep>
    <pf-wizard-substep><!-- content here --></pf-wizard-substep>
  </pf-wizard-step>
  <pf-wizard-step><!-- additional configuration can be added here with substeps if desired --></pf-wizard-step>
  <pf-wizard-step><!-- review steps and final command here --></pf-wizard-step>
</pf-wizard>

Usage

as element:
<pf-wizard
       wizard-title="{string}"
       [hide-indicators="{boolean}"]
       [active-step-title-only="{boolean}"]
       [hide-sidebar="{boolean}"]
       [hide-header="{boolean}"]
       [hide-back-button="{boolean}"]
       [step-class="{string}"]
       [sidebar-class="{string}"]
       [content-height="{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}"]
       [embed-in-page="{boolean}"]
       [on-step-changed="{function(step, index)}"]>
</pf-wizard>

Parameters

ParamTypeDetails
wizardTitlestring

The wizard title displayed in the header

hideIndicators
(optional)
boolean

Hides the step indicators in the header of the wizard

activeStepTitleOnly
(optional)
boolean

Shows the title only for the active step in the step indicators, optional, default is false.

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.

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

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.

onStepChanged
(optional)
function(step, index

Called when the wizard step is changed, passes in the step and the step index of the step changed to

Example

Source






























































Demo