Skip to content
Declarative create wizards, tabbed UIs, and more
Branch: master
Clone or download
alexlafroscia Merge pull request #146 from alexlafroscia/one-way-data-flow
feat: one-way-bind the `currentStep` property
Latest commit 22e8af9 Jun 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore(ci): add Ember Try scenarios to workflow May 14, 2019
.vscode chore: configure VSCode to run Prettier on save Aug 27, 2018
addon Merge pull request #146 from alexlafroscia/one-way-data-flow Jun 10, 2019
app Fix linting errors Mar 28, 2018
config chore(deps): externalize `ember-native-class-polyfill` Jan 22, 2019
fastboot-tests chore(deps): Upgrade prettier Apr 20, 2018
tests feat: one-way-bind the `currentStep` property May 9, 2019
types/dummy Convert addon to TypeScript Apr 3, 2018
vendor Initial Commit from Ember CLI v2.8.0 Sep 29, 2016
.editorconfig Initial Commit from Ember CLI v2.8.0 Sep 29, 2016
.ember-cli Initial Commit from Ember CLI v2.8.0 Sep 29, 2016
.eslintignore
.eslintrc.js refactor: remove TypeScript May 8, 2019
.gitignore
.npmignore chore(deps): run `ember-cli-update` to v3.5.0 Oct 15, 2018
.prettierrc chore: configure VSCode to run Prettier on save Aug 27, 2018
.template-lintrc.js chore(deps): run `ember-cli-update` to v3.5.0 Oct 15, 2018
.travis.yml chore: run against Node 10 on Travis CI May 10, 2019
.vscodeignore Add VSCode config Oct 7, 2016
.watchmanconfig Initial Commit from Ember CLI v2.8.0 Sep 29, 2016
CHANGELOG.md chore(release): 9.0.0-beta.0 May 10, 2019
LICENSE.md Initial Commit from Ember CLI v2.8.0 Sep 29, 2016
README.md chore(deps): externalize `ember-native-class-polyfill` Jan 22, 2019
commitlint.config.js chore: add commitlint and husky May 4, 2018
ember-cli-build.js Add documentation around transition validation Mar 28, 2018
index.js chore(deps): run `ember-cli-update` to v3.5.0 Oct 15, 2018
jsconfig.json
package.json chore(deps): upgrade `ember-css-modules` May 10, 2019
testem.js chore(deps): run `ember-cli-update` to v3.5.0 Oct 15, 2018
tsconfig.json chore(deps): upgrade TypeScript, definitions Oct 15, 2018
yarn.lock chore(deps): upgrade `ember-css-modules` May 10, 2019

README.md

ember-steps

Build Status

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

Installation

ember install ember-steps

Basic Usage

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

{{#step-manager as |w|}}
  We'll put some cool stuff in here in a moment
{{/step-manager}}

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

{{#step-manager as |w|}}
  {{#w.step name='a'}}
    This is the first step!
  {{/w.step}}

  {{#w.step name='b'}}
    This is the second step!
  {{/w.step}}
{{/step-manager}}

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!

{{#step-manager as |w|}}
  {{#w.step name='a'}}
    This is the first step!

    <button {{action w.transition-to 'b'}}>
      Next, please!
    </button>
  {{/w.step}}

  {{#w.step name='b'}}
    This is the second step!

    <button {{action w.transition-to 'a'}}>
      Wait, go back!
    </button>
  {{/w.step}}
{{/step-manager}}

The step-manager 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.

Not-So-Basic Usage

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!

Compatibility Note

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

ember Version ember-steps Version
3.6 (or 3.4+ with polyfill) to latest v8.0.0 or later
3.4 to 3.6 v7.0.0 or later
3.3 to 2.16 v6.1.3
2.12 or earlier v4.0.0
You can’t perform that action at this time.