Declaratively create wizards, tabs, or any interface with sections of the page that should be shown one-at-a-time

ember install ember-steps

Using ember-steps starts with creating a step-manager.

<StepManager as |w|>
  We'll put some cool stuff in here in a moment
</StepManager>

Cool, right? Ehh, it doesn't do much yet -- we need to add some steps.

<StepManager as |w|>
  <w.Step @name='a'>
    This is the first step!
  </w.Step>

  <w.Step @name='b'>
    This is the second step!
  </w.Step>
</StepManager>

As you may have guessed, the first w.Step component, a, will be visible initially, and b will be invisible. Note that these names are important. Why? Because we need a way to transition between them!

<StepManager as |w|>
  <w.Step @name='a'>
    This is the first step!

    <button {{on 'click' (fn w.transition-to 'b')}}>
      Next, please!
    </button>
  </w.Step>

  <w.Step @name='b'>
    This is the second step!

    <button {{on 'click' (fn w.transition-to 'a')}}>
      Wait, go back!
    </button>
  </w.Step>
</StepManager>

The <StepManager> provides a closure action that can be called with the name of a step to show that one, instead. One of the neat features of ember-steps is that there is no explicit order to the steps; show all of them, or only some. It's entirely up to you.

The above examples show the basic idea, but there's more configuration (and power) available if you need it. Head over to the cookbook to read more about what ember-steps can do!

The following table can help determine which verison of ember-steps work with specific Ember versions