ember-slides

0.3.0 • Public • Published

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.

Package Sidebar

Install

npm i ember-slides

Weekly Downloads

10

Version

0.3.0

License

MIT

Unpacked Size

230 kB

Total Files

14

Last publish

Collaborators

  • crhayes_