Skip to content

Easy breezy slide decks and multi-steppers in Ember.

License

Notifications You must be signed in to change notification settings

crhayes/ember-slides

Repository files navigation

Ember Slides

Build Status

Signup "wizards", onboarding flows, image carousels... the list goes on. How many times have you created UIs that required multiple, sequential steps? How many times have you had to rewrite the same step logic?

With Ember Slides you'll never have to write that step code again.

Installation

ember install ember-slides

Usage

Hardcoded Slides

{{#slide-deck as |d|}}
  {{#d.slide}}
    Slide 1
  {{/d.slide}}
  {{#d.slide}}
    Slide 2
  {{/d.slide}}
  {{#d.slide}}
    Slide 3
  {{/d.slide}}
  <button {{action d.prev}} disabled={{d.prevDisabled}}>Prev</button>
  <button {{action d.next}} disabled={{d.nextDisabled}}>Next</button>
{{/slide-deck}}

Named Slides

{{#slide-deck as |d|}}
  {{#d.slide name="one"}}
    Slide 1
  {{/d.slide}}
  {{#d.slide name="two"}}
    Slide 2
  {{/d.slide}}
  {{#d.slide name="three"}}
    Slide 3
  {{/d.slide}}

  <button {{action d.show "one"}}>First</button>
  <button {{action d.show "two"}}>Second</button>
  <button {{action d.show "three"}}>Third</button>
{{/slide-deck}}

Dynamic Slides

{{#slide-deck as |d|}}
  {{#each things as |thing|}}
    {{#d.slide}}
      {{thing}}
    {{/d.slide}}
  {{/each}}

  {{#each d.slides as |s|}}
    <button {{action d.show s.name}} disabled={{s.isActive}}>{{s.name}}</button>
  {{/each}}
{{/slide-deck}}

There's more to see, so make sure to check out additional examples in the following files: tests/dummy/app/templates/application.hbs and tests/integration/components/slide-deck-test.js.

Contributing

Installation

  • git clone https://github.com/crhayes/ember-slides
  • cd ember-slides
  • npm install

Linting

  • npm run lint:js
  • npm run lint:js -- --fix

Running tests

  • ember test – Runs the test suite on the current Ember version
  • ember test --server – Runs the test suite in "watch mode"
  • ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

For more information on using ember-cli, visit https://ember-cli.com/.

License

This project is licensed under the MIT License.