Skip to content

Commit 136b441

Browse files
omichelsenomichelsen
committed
Initial commit.
0 parents  commit 136b441

File tree

8 files changed

+585
-0
lines changed

8 files changed

+585
-0
lines changed

‎README.md‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
# angular-steps
2+
3+
Wrap your Angular UI logic into a series of steps (pages/slides).
4+
5+
Demo: http://codepen.io/omichelsen/pen/zkCun
6+
7+
## Install
8+
9+
```bash
10+
$ bower install angular-steps --save
11+
```
12+
13+
Include the library in your web page:
14+
15+
```html
16+
<script src="bower_components/angular-steps/angular-steps.js"></script>
17+
```
18+
19+
angular-steps has no other dependencies than [Angular](https://angularjs.org/)
20+
itself, and [ngAnimate](https://docs.angularjs.org/api/ngAnimate/service/$animate)
21+
if you want animated transition effects.
22+
23+
## Usage
24+
25+
Require angular-steps as a dependency for your app:
26+
27+
```javascript
28+
angular.module('MyApp', ['angular-steps']);
29+
```
30+
31+
Start creating some steps around your UI:
32+
```html
33+
<steps>
34+
<step>
35+
<h1>Step 1</h2>
36+
<button step-next>Next</button>
37+
</step>
38+
<step>
39+
<h1>Step 2</h2>
40+
<button step-previous>Previous</button>
41+
</step>
42+
</steps>
43+
```
44+
45+
The main `<steps>` directive has the following (optional) properties:
46+
47+
- **name**: Name of the group of steps. Use if you have multiple `<steps>` to
48+
reference them in the `ServiceHandler`.
49+
- **template**: Path to a custom template.
50+
- **current-step**: Variable containing the name of the currently selected step.
51+
Can also be used to change selected step.
52+
- **on-finish**: Scope function to be called when the user has been through all steps.
53+
54+
### Buttons
55+
56+
You can step navigate back and forward between the steps using these built-in
57+
attributes:
58+
59+
- **step-next**: Go to next step.
60+
- **step-previous**: Go to previous step.
61+
- **step-cancel**: Go to first step.
62+
- **step-finish**: Triggers the `on-finish` callback. Clicking `step-next` on
63+
the last step will have same effect.
64+
65+
All attributes can receive an optional function to be called before changing
66+
the step:
67+
68+
```html
69+
<button step-next="doStuff()">Next</button>
70+
```
71+
72+
In this case, `doStuff()` will be called before going to the next step.
73+
74+
### Accessing steps from the controller
75+
76+
If you want to access and manipulate the steps from the controller, you can
77+
inject the StepsHandler.
78+
79+
This example validates that the input name is "Marvin" and proceeds to the next
80+
step:
81+
82+
```html
83+
<steps>
84+
<step>
85+
<input type="text" ng-model="name">
86+
<button ng-click="validateAndSubmit">Save my name</button>
87+
</step>
88+
</steps>
89+
```
90+
```javascript
91+
myapp.controller('MyCtrl', ['StepsService', function (stepsService) {
92+
$scope.validateAndSubmit = function () {
93+
if ($scope.name === 'Marvin') {
94+
stepsService.steps().next();
95+
}
96+
};
97+
}]);
98+
```
99+
100+
You can use the following functions on `StepsService.steps()`:
101+
102+
- **next()**: Go to next step.
103+
- **previous()**: Go to previous step.
104+
- **cancel()**: Go to first step.
105+
- **finish()**: Triggers the `on-finish` callback.
106+
- **goTo(** *number* | *name* **)**: Go to a specific step. Argument can be
107+
either a number (zero-based index) or the **name** of a step.
108+
109+
#### Multiple steps
110+
111+
If you have multiple `<steps>` in your page and wish to access them from the
112+
`StepsService`, be sure to specify a unique **name** on each like so:
113+
114+
```html
115+
<steps name="myLoginFlow"> ... </steps>
116+
<steps name="mySecondFlow"> ... </steps>
117+
```
118+
119+
Access them by name to avoid conflicts:
120+
121+
```javascript
122+
StepsService.steps('myLoginFlow').next();
123+
StepsService.steps('mySecondFlow').next();
124+
```
125+
126+
## Styling
127+
128+
By default the steps are overlayed on top of each other using
129+
`position: absolute` and `z-index`.
130+
131+
If you want to style each step individually, you can apply a CSS class to it
132+
as you would any element:
133+
134+
```html
135+
<step class="step-yellow">
136+
...
137+
</step>
138+
```
139+
```css
140+
.step-yellow {
141+
background: yellow;
142+
}
143+
```
144+
145+
The default styles for angular-steps are supplied in both CSS, SCSS and LESS
146+
format, whichever your prefer.
147+
148+
### Animations
149+
150+
You can animate the transition between the steps using
151+
[ngAnimate](https://docs.angularjs.org/api/ngAnimate/service/$animate).
152+
The following styles will add a fade in/out animation between the steps:
153+
154+
```css
155+
.angular-steps .step.ng-hide-add,
156+
.angular-steps .step.ng-hide-remove {
157+
transition: all 0.6s ease-in-out;
158+
opacity: 1;
159+
}
160+
.angular-steps .step.ng-hide {
161+
opacity: 0;
162+
}
163+
```
164+
165+
166+
## Credits
167+
168+
This project was inspired by
169+
[angular-wizard](https://github.com/mgonto/angular-wizard) by
170+
[@mgonto](https://twitter.com/mgonto). angular-steps is intended to be simpler,
171+
with a subset of features, smaller footprint and fewer dependencies.
172+
173+
## Licence
174+
The MIT License (MIT)
175+
176+
Copyright (c) 2014 Ole Michelsen http://ole.michelsen.dk
177+
178+
Permission is hereby granted, free of charge, to any person obtaining a copy
179+
of this software and associated documentation files (the "Software"), to deal
180+
in the Software without restriction, including without limitation the rights
181+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
182+
copies of the Software, and to permit persons to whom the Software is
183+
furnished to do so, subject to the following conditions:
184+
185+
The above copyright notice and this permission notice shall be included in
186+
all copies or substantial portions of the Software.
187+
188+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
189+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
190+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
191+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
192+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
193+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
194+
THE SOFTWARE.

‎_angular-steps.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.angular-steps {
2+
position: relative;
3+
4+
.step {
5+
position: absolute;
6+
width: 100%;
7+
height: 100%;
8+
z-index: 1;
9+
}
10+
.step.ng-hide {
11+
display: block !important;
12+
z-index: 0;
13+
}
14+
}
15+
16+
/*
17+
* Animations (optional) - requires ngAnimate
18+
*/
19+
.angular-steps {
20+
.step.ng-hide-add,
21+
.step.ng-hide-remove {
22+
transition: all 0.6s ease-in-out;
23+
opacity: 1;
24+
}
25+
26+
.step.ng-hide {
27+
opacity: 0;
28+
}
29+
}

‎angular-steps.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.angular-steps {
2+
position: relative;
3+
}
4+
.angular-steps .step {
5+
position: absolute;
6+
z-index: 1;
7+
}
8+
.angular-steps .step.ng-hide {
9+
display: block !important;
10+
z-index: 0;
11+
}
12+
13+
/*
14+
* Animations (optional) - requires ngAnimate
15+
*/
16+
.angular-steps .step.ng-hide-add,
17+
.angular-steps .step.ng-hide-remove {
18+
transition: all 0.6s ease-in-out;
19+
opacity: 1;
20+
}
21+
.angular-steps .step.ng-hide {
22+
opacity: 0;
23+
}

0 commit comments

Comments
 (0)