{"id":19444143,"url":"https://github.com/coachlogix/ember-paper-stepper","last_synced_at":"2025-04-25T00:32:56.446Z","repository":{"id":18367300,"uuid":"84100963","full_name":"CoachLogix/ember-paper-stepper","owner":"CoachLogix","description":"Step up your app with material steppers.","archived":false,"fork":false,"pushed_at":"2022-12-08T05:28:37.000Z","size":6345,"stargazers_count":28,"open_issues_count":32,"forks_count":10,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-22T18:27:30.034Z","etag":null,"topics":["ember","ember-paper","material-design","stepper"],"latest_commit_sha":null,"homepage":"https://coachlogix.github.io/ember-paper-stepper/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CoachLogix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-06T17:23:04.000Z","updated_at":"2024-05-30T02:44:00.000Z","dependencies_parsed_at":"2023-01-13T19:47:50.763Z","dependency_job_id":null,"html_url":"https://github.com/CoachLogix/ember-paper-stepper","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoachLogix%2Fember-paper-stepper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoachLogix%2Fember-paper-stepper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoachLogix%2Fember-paper-stepper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoachLogix%2Fember-paper-stepper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CoachLogix","download_url":"https://codeload.github.com/CoachLogix/ember-paper-stepper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250733585,"owners_count":21478396,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ember","ember-paper","material-design","stepper"],"created_at":"2024-11-10T16:05:16.311Z","updated_at":"2025-04-25T00:32:56.139Z","avatar_url":"https://github.com/CoachLogix.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-paper-stepper [![Build Status](https://travis-ci.org/CoachLogix/ember-paper-stepper.svg?branch=master)](https://travis-ci.org/CoachLogix/ember-paper-stepper) [![Ember Observer Score](http://emberobserver.com/badges/ember-paper-stepper.svg)](http://emberobserver.com/addons/ember-paper-stepper)\n\nThis is an [ember-paper](https://github.com/miguelcobain/ember-paper) addon that provides an implementation of [material steppers](https://material.io/guidelines/components/steppers.html).\n\n## Usage\n\nAn example usage:\n\n```hbs\n{{#paper-stepper currentStep=currentStep onStepChange=(action (mut currentStep))\n  onStepperCompleted=(action \"saveModel\") as |stepper|}}\n\n  {{#stepper.step label=\"Select how it looks\" as |step|}}\n    {{#step.body}}\n      {{!-- Content here. Probably some form. --}}\n    {{/step.body}}\n    {{#step.actions as |nextStep previousStep goTo|}}\n      {{#paper-button primary=true raised=true onClick=(action nextStep)}}\n        Continue\n      {{/paper-button}}\n      {{#paper-button onClick=(action previousStep)}}\n        Back\n      {{/paper-button}}\n      {{#paper-button onClick=(action goTo 0)}}\n        Start from the beginning\n      {{/paper-button}}\n    {{/step.actions}}\n  {{/stepper.step}}\n\n  {{!-- add as many steps as necessary --}}\n\n{{/paper-stepper}}\n```\n\n## Demo\n\nYou can see how this addon looks like at https://coachlogix.github.io/ember-paper-stepper/\n\n## Installation\n\n```bash\nember install ember-paper-stepper\n```\n\nDon't forget to import your styles in your `app.scss` **after** importing ember paper styles:\n\n```scss\n@import \"ember-paper\";\n@import \"ember-paper-stepper\";\n```\n\n## API\n\n### `{{#paper-stepper as |stepper|}}`\n\n- `currentStep` - defaults to `0` - this is the 0-indexed number of the current active step. Use this together with `onStepChange` to update steps.\n- `vertical` - defaults to `false` - this toggles the stepper between vertical and horizontal modes.\n- `linear` - defaults to `true` - if `true`, the user must pass through all the steps in a \"linear\" fashion. If `false`, the user is able to click on the steps at will, not following any particular order.\n- `alternative` - if `true`, the stepper will show an alternative form of the horizontal stepper detailed in the spec. Only works when `vertical` is falsy.\n- `mobileStepper` - if `true`, an *horizontal* stepper will turn into a mobile stepper if viewport width is below `599px`.\n- `onStepChange` - an action that is sent when a nextStep, previousStep or header button is pressed. Use this together with `currentStep` to update steps.\n- `onStepperCompleted` - an action that is sent when a nextStep button is pressed on the last step.\n\nThis component yields a hash that contains a `step` component which you can use to define multiple steps.\n\n### `{{#stepper.step as |step|}}`\n\n- `label` - the label to display on the header buttons.\n- `optional` - if `true`, an optional styling and label are rendered on the respective step header button.\n- `optionalLabel` - defaults to `'Optional'` - this is the text that is rendered when `optional` is `true`.\n- `error` - Set this property to a string containing an error message. Use this property to\n  1. user an error style on the respective header buttons to an error style\n  2. display an error message on the respective header button\n- `summary` - you can specify a summary for each step. This text will be displayed next to the step number.\nIt is useful to remember the user what has been selected in previous steps. *This will take precedence over the `optional` option.*\n- `stepNumber` - this property is automatically assigned by the parent stepper *based on the rendering order*. For most\nuse cases you won't need this property and the default behavior is enough. However, in some cases you may want to insert\nsome steps dynamically in the middle of the steps. This makes sure that the steps are ordered when rendered. You don't\nneed to specify sequencial numbers. You can use, for example, steps with stepNumbers `1`, `8` and `10`.\nThey will be rendered in the correct order.\n\nThis component yields a hash that contains a `body` and an `actions` component which you can use to define multiple the content of the step.\n\nThe hash also contains `nexStep`, `previousStep` and `goTo` actions to be used separately.\n\n### `{{#step.body}}`\n\nUse this component to render your content with the correct styles/markup.\n\n### `{{#step.actions as |nextStep previousStep goTo|}}`\n\nThis component yields three actions: `nextStep`, `previousStep` and `goTo`.\nYou can use those actions in any way you prefer.\nThey work perfectly using ember-paper's paper-button like: `{{#paper-button onClick=(action goTo 0)`\n\n## Credits\n\nThis addon was inspired by [material-steppers](https://github.com/eberlitz/material-steppers) project.\n\n## Running\n\n* `ember serve`\n* Visit your app at [http://localhost:4200](http://localhost:4200).\n\n## Running Tests\n\n* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)\n* `ember test`\n* `ember test --server`\n\n## Building\n\n* `ember build`\n\nFor more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoachlogix%2Fember-paper-stepper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoachlogix%2Fember-paper-stepper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoachlogix%2Fember-paper-stepper/lists"}