patternfly/tests/pages/wizard.html

This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.

---
categories: [Widgets]
layout: page
title: Wizard
resource: true
---
<h2>Complete Wizard</h2>
{% include widgets/communication/wizard.html id="complete" %}

<h2>Initializing</h2>
<button class="btn btn-default" data-toggle="modal" data-target="#initializing">Launch wizard showing initialization
  state
</button>
<div class="modal" id="initializing" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg wizard-pf">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" aria-label="Close">
          <span class="pficon pficon-close"></span>
        </button>
        <h4 class="modal-title">Wizard Title</h4>
      </div>
      <div class="modal-body wizard-pf-body clearfix">
        <div class="wizard-pf-steps hidden">
          <ul class="wizard-pf-steps-indicator">
            <li>
              <a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
            </li>
            <li>
              <a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
            </li>
            <li>
              <a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
            </li>
          </ul>
        </div>

        <div class="wizard-pf-sidebar hidden">
          <ul class="list-group">
            <li class="list-group-item active">
              <a>
                <span class="wizard-pf-substep-number">1A.</span>
                <span class="wizard-pf-substep-title">First Step</span>
              </a>
            </li>
            <li class="list-group-item">
              <a>
                <span class="wizard-pf-substep-number">1B.</span>
                <span class="wizard-pf-substep-title">Masters &amp; Nodes</span>
              </a>
            </li>
            <li class="list-group-item">
              <a>
                <span class="wizard-pf-substep-number">1C.</span>
                <span class="wizard-pf-substep-title">CDN Channel</span>
              </a>
            </li>
          </ul>
        </div><!-- /.wizard-pf-sidebar -->

        <div class="wizard-pf-main" style="margin-left: 0px">
          <div class="blank-slate-pf">
            <div class="spinner spinner-lg blank-slate-pf-icon"></div>
            <h3 class="blank-slate-pf-main-action">Loading Wizard</h3>
            <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
              vivamus, lorem sociosqu eget nunc amet. </p>
          </div>

        </div>

      </div><!-- /.wizard-pf-body -->

      <!-- TODO: disable buttons -->
      <div class="modal-footer wizard-pf-footer">
        <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-default disabled" data-dismiss="modal">
          <span class="i fa fa-angle-left"></span>
          Back
        </button>
        <button type="button" class="btn btn-primary disabled" data-dismiss="modal">
          Next
          <span class="i fa fa-angle-right"></span>
        </button>
      </div><!-- /.wizard-pf-footer -->

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<h2>Last Step</h2>
<button id="doneButton" class="btn btn-default" data-toggle="modal" data-target="#done">Launch wizard showing finalizing
state
</button>
<div class="modal" id="done" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg wizard-pf">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" aria-label="Close">
          <span class="pficon pficon-close"></span>
        </button>
        <h4 class="modal-title">Wizard Title</h4>
      </div>
      <div class="modal-body wizard-pf-body clearfix">
        <div class="wizard-pf-steps">
          <ul class="wizard-pf-steps-indicator wizard-pf-steps-alt-indicator active">

            <li class="wizard-pf-step" data-tabgroup="1">
              <a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span>
                <span class="wizard-pf-step-title-substep active">details</span>
                <span class="wizard-pf-step-title-substep">Settings</span>
              </a>
            </li>

            <li class="wizard-pf-step viewed" data-tabgroup="2">
              <a>
                <span class="wizard-pf-step-number">2</span>
                <span class="wizard-pf-step-title">Second Step</span>
                <span class="wizard-pf-step-title-substep">details</span>
                <span class="wizard-pf-step-title-substep">settings</span>
              </a>
            </li>

            <li class="wizard-pf-step active" data-tabgroup="3">
              <a>
                <span class="wizard-pf-step-number">3</span>
                <span class="wizard-pf-step-title">Review</span>
                <span class="wizard-pf-step-title-substep">summary</span>
                <span class="wizard-pf-step-title-substep active">progress</span>
              </a>
            </li>
          </ul>

          <ul class="wizard-pf-steps-alt">
            <li class="wizard-pf-step-alt viewed">
              <a href="javascript:void(0);" class="disabled">
                <span class="wizard-pf-step-alt-number">1</span>
                <span class="wizard-pf-step-alt-title">First Step</span>
              </a>
              <ul class="hidden">
                <li class="wizard-pf-step-alt-substep"><a href="">1A. Details</a></li>
                <li class="wizard-pf-step-alt-substep"><a class="disabled" href="#">1B. Settings</a></li>
              </ul>
            </li>

            <li class="wizard-pf-step-alt viewed disabled">
              <a href="javascript:void(0);" class="disabled">
                <span class="wizard-pf-step-alt-number">2</span>
                <span class="wizard-pf-step-alt-title">Second Step</span>
              </a>
              <ul class="hidden">
                <li class="wizard-pf-step-alt-substep"><a class="disabled" href="#">2A. Details</a></li>
                <li class="wizard-pf-step-alt-substep"><a class="disabled" href="#">2B. Settings</a></li>
              </ul>
            </li>

            <li class="wizard-pf-step-alt active">
              <a href="javascript:void(0);">
                <span class="wizard-pf-step-alt-number">3</span>
                <span class="wizard-pf-step-alt-title">Review</span>
              </a>
              <ul>
                <li class="wizard-pf-step-alt-substep"><a class="disabled" href="#">3A. Summary</a></li>
                <li class="wizard-pf-step-alt-substep active"><a class="disabled" href="#">3B. Progress</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="wizard-pf-row">
          <div class="wizard-pf-sidebar">
            <ul class="list-group">
              <li class="list-group-item">
                <a>
                  <span class="wizard-pf-substep-number">3A.</span>
                  <span class="wizard-pf-substep-title">Summary</span>
                </a>
              </li>
              <li class="list-group-item active">
                <a>
                  <span class="wizard-pf-substep-number">3B.</span>
                  <span class="wizard-pf-substep-title">Progress</span>
                </a>
              </li>
            </ul>
          </div><!-- /.wizard-pf-sidebar -->

          <div class="wizard-pf-main">
            <div class="blank-slate-pf">
              <div class="spinner spinner-lg blank-slate-pf-icon"></div>
              <h3 class="blank-slate-pf-main-action">Deployment in progress</h3>
              <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
                vivamus, lorem sociosqu eget nunc amet. </p>
            </div>

          </div>
        </div>
      </div><!-- /.wizard-pf-body -->

      <!-- TODO: disable buttons -->
      <div class="modal-footer wizard-pf-footer">
        <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-default disabled" data-dismiss="modal">
          <span class="i fa fa-angle-left"></span>
          Back
        </button>
        <button type="button" class="btn btn-primary disabled" data-dismiss="modal">
          Deploy
          <span class="i fa fa-angle-right"></span>
        </button>
      </div><!-- /.wizard-pf-footer -->

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>

  $(document).ready(function() {
    var beenClicked = false;
    $('#doneButton').click(function() {
      if (!beenClicked) {
        beenClicked = true;
        $('#done .wizard-pf-steps-alt-indicator').on('click', function() {
          $('#done .wizard-pf-steps-alt-indicator').toggleClass('active');
          $('#done .wizard-pf-steps-alt').toggleClass('hidden');
        });
      }
    });
  });
</script>