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

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.

## Example

#### Source

#### Demo