https://github.com/alexlafroscia/ember-steps

Declaratively create wizards, tabbed UIs, and more
https://github.com/alexlafroscia/ember-steps

ember ember-addon wizard

Last synced: 5 days ago
JSON representation

Declaratively create wizards, tabbed UIs, and more

• Host: GitHub
• URL: https://github.com/alexlafroscia/ember-steps
• Owner: alexlafroscia
• License: mit
• Created: 2016-09-30T01:25:56.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-24T10:07:52.000Z (almost 2 years ago)
• Last Synced: 2024-10-12T03:31:52.962Z (24 days ago)
• Topics: ember, ember-addon, wizard
• Language: JavaScript
• Homepage: https://alexlafroscia.github.io/ember-steps
• Size: 13.9 MB
• Stars: 90
• Watchers: 6
• Forks: 23
• Open Issues: 29
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ember-steps

![CI](https://github.com/alexlafroscia/ember-steps/workflows/CI/badge.svg)

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

## Installation

```bash

ember install ember-steps

```

## Basic Usage

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

```handlebars

  We'll put some cool stuff in here in a moment

```

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

```handlebars

  

    This is the first step!

  

  

    This is the second step!

  

```

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!

```handlebars

  

    This is the first step!

    

      Next, please!

    

  

  

    This is the second step!

    

      Wait, go back!

    

  

```

The `` provides a [closure action][ember-closure-actions] 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][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.13+`           | `v10.0.0`             |

| `3.6`             | `v9.0.0`              |

| `3.4` to `3.6`    | `v7.0.0`              |

| `3.3` to `2.16`   | `v6.1.3`              |

| `2.12` or earlier | `v4.0.0`              |

[ember-closure-actions]: https://guides.emberjs.com/v3.17.0/components/component-state-and-actions/

[cookbook]: https://alexlafroscia.github.io/ember-steps/docs/cookbook

[hash-helper]: http://emberjs.com/blog/2016/01/15/ember-2-3-released.html#toc_hash-helper