This is an ember-paper addon that provides an implementation of material steppers.
An example usage:
You can see how this addon looks like at https://coachlogix.github.io/ember-paper-stepper/
ember install ember-paper-stepper
Don't forget to import your styles in your app.scss
after importing ember paper styles:
@import "ember-paper";
@import "ember-paper-stepper";
{{#paper-stepper as |stepper|}}
currentStep
- defaults to 0
- this is the 0-indexed number of the current active step. Use this together with onStepChange
to update steps.vertical
- defaults to false
- this toggles the stepper between vertical and horizontal modes.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.alternative
- if true
, the stepper will show an alternative form of the horizontal stepper detailed in the spec. Only works when vertical
is falsy.mobileStepper
- if true
, an horizontal stepper will turn into a mobile stepper if viewport width is below 599px
.onStepChange
- an action that is sent when a nextStep, previousStep or header button is pressed. Use this together with currentStep
to update steps.onStepperCompleted
- an action that is sent when a nextStep button is pressed on the last step.This component yields a hash that contains a step
component which you can use to define multiple steps.
{{#stepper.step as |step|}}
label
- the label to display on the header buttons.optional
- if true
, an optional styling and label are rendered on the respective step header button.optionalLabel
- defaults to 'Optional'
- this is the text that is rendered when optional
is true
.error
- Set this property to a string containing an error message. Use this property to
summary
- you can specify a summary for each step. This text will be displayed next to the step number.It is useful to remember the user what has been selected in previous steps. This will take precedence over the optional
option.stepNumber
- this property is automatically assigned by the parent stepper based on the rendering order. For mostuse cases you won't need this property and the default behavior is enough. However, in some cases you may want to insertsome steps dynamically in the middle of the steps. This makes sure that the steps are ordered when rendered. You don'tneed to specify sequencial numbers. You can use, for example, steps with stepNumbers 1
, 8
and 10
.They will be rendered in the correct order.This component yields a hash that contains a body
and an actions
component which you can use to define multiple the content of the step.
The hash also contains nexStep
, previousStep
and goTo
actions to be used separately.
{{#step.body}}
Use this component to render your content with the correct styles/markup.
{{#step.actions as |nextStep previousStep goTo|}}
This component yields three actions: nextStep
, previousStep
and goTo
.You can use those actions in any way you prefer.They work perfectly using ember-paper's paper-button like: {{#paper-button onClick=(action goTo 0)
This addon was inspired by material-steppers project.
ember serve
npm test
(Runs ember try:each
to test your addon against multiple Ember versions)ember test
ember test --server
ember build
For more information on using ember-cli, visit https://ember-cli.com/.
Ember Paper This project aims to bring Google's new Material Design to Ember. The goal is to encapsulate everything possible in Ember components. This project is packaged as an Ember-cli addon. Explor
Lightning Network Paper This is the Bitcoin Lightning Network paper. Paper PDF: http://lightning.network/lightning-network-paper.pdf #Compiling/Editing Paper is in LaTeX format. Diagrams are in dia, b
Let's Reproduce Paper Simulations! Some paper simulations by matlab for multi-robot systems, formation control, distributed optimization and cooperative manipulation. If you have any interesting paper
White Paper White Paper is a theme for Jekyll. It is made keeping content in focus and is best for writers/developers who also like to share code with their essays. Create blog posts jekyll-compose ge
paper-switch 是 Swift 的 UISwitch 子类,可以在父视图上使用 onTintColor 绘制。实现了 Ramotion 的 this Dribbble 概念。
实现折叠样式的视图切换效果。当手指向左或者向右划动屏幕界面时,左边或者右边隐藏的视图会随着手指的划动以展开折叠的方式展开视图,同样,隐藏视图也是将左右视图慢慢折叠回去。支持ARC。 [Code4App.com]