Skip to content

Commit d0b8953

Browse files
authored
Add documentation for the new feature of version 1.7.0 to the README (#18)
1 parent 646d80c commit d0b8953

File tree

1 file changed

+76
-3
lines changed

1 file changed

+76
-3
lines changed

README.md

+76-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
[![Test Coverage](https://codeclimate.com/github/madoar/ng2-archwizard/badges/coverage.svg)](https://codeclimate.com/github/madoar/ng2-archwizard/coverage)
99
[![NPM Version](https://img.shields.io/npm/v/ng2-archwizard.svg)](https://www.npmjs.com/package/ng2-archwizard)
1010

11-
This project contains a functional wizard component for [Angular 2](https://angular.io/).
11+
This project contains a functional wizard component for [Angular 2 and 4](https://angular.io/).
1212

1313
## Build
1414

@@ -20,7 +20,7 @@ Run `npm test` to execute the unit tests via [Karma](https://karma-runner.github
2020

2121
## Installation
2222

23-
Ng2-archwizard is available as an NPM package. To install ng2-archwizard in your project directory run:
23+
`ng2-archwizard` is available as an NPM package. To install ng2-archwizard in your project directory run:
2424
```
2525
$ npm install --save ng2-archwizard
2626
```
@@ -189,6 +189,24 @@ Possible `<wizard-completion-step>` parameters:
189189
| [navigationSymbolFontFamily] | string | null |
190190
| (stepEnter) | function(MovingDirection) | null |
191191

192+
### \[enableBackLinks\]
193+
In some cases it may be required that the user is able to leave an entered `wizard-completion-step`.
194+
If this is the case you can enable this by adding the directive `[enableBackLinks]` to the `wizard-completion-step`.
195+
196+
```html
197+
<wizard-completion-step enableBackLinks>
198+
Final wizard step
199+
</wizard-completion-step>
200+
```
201+
202+
#### Parameter overview
203+
Possible `[enableBackLinks]` parameters:
204+
205+
| Parameter name | Possible Values | Default Value |
206+
| ----------------------------- | ------------------------------------------------- | ------------- |
207+
| (stepExit) | function(MovingDirection) | null |
208+
209+
192210
### \[wizardStepTitle\]
193211
Sometimes it's not enough to define a title with the `title` attribute in `<wizard-step>` and `<wizard-completion-step>`.
194212
One example for such a case is, if the title should be written in another font.
@@ -291,7 +309,62 @@ Possible parameters:
291309
| ----------------- | ------------------------------------------- | ------------- |
292310
| (finalize) | function() | null |
293311

312+
### \[wizardStep\]
313+
In some cases it may be a good idea to move a wizard step to a custom component.
314+
This can be done by defining adding the `[wizardStep]` directive to the component, that contains the wizard step.
315+
316+
```html
317+
<wizard>
318+
<wizard-step title="Steptitle 1">
319+
Step 1
320+
</wizard-step>
321+
<custom-step wizardStep title="Steptitle 2"></custom-step>
322+
<wizard-step title="Steptitle 3">
323+
Step 3
324+
</wizard-step>
325+
</wizard>
326+
```
327+
328+
#### Parameter overview
329+
Possible `[wizardStep]` parameters:
330+
331+
| Parameter name | Possible Values | Default Value |
332+
| ----------------------------- | ------------------------------------------------- | ------------- |
333+
| [title] | string | null |
334+
| [navigationSymbol] | string | '' |
335+
| [navigationSymbolFontFamily] | string | null |
336+
| [canExit] | function(MovingDirection): boolean &#124; boolean | true |
337+
| (stepEnter) | function(MovingDirection) | null |
338+
| (stepExit) | function(MovingDirection) | null |
339+
340+
### \[wizardCompletionStep\]
341+
In addition to the possibility of defining a normal wizard step in a custom component,
342+
it is also possible to define a wizard completion step in a custom component.
343+
To define a wizard completion step in a custom component you need to add the `[wizardCompletionStep]` directive to the custom component,
344+
that contains the wizard completion step.
345+
346+
```html
347+
<wizard>
348+
<wizard-step title="Steptitle 1">
349+
Step 1
350+
</wizard-step>
351+
<custom-step wizardCompletionStep title="Completion steptitle">
352+
</custom-step>
353+
</wizard>
354+
```
355+
356+
#### Parameter overview
357+
Possible `[wizardCompletionStep]` parameters:
358+
359+
| Parameter name | Possible Values | Default Value |
360+
| ----------------------------- | ------------------------------------------------- | ------------- |
361+
| [title] | string | null |
362+
| [navigationSymbol] | string | '' |
363+
| [navigationSymbolFontFamily] | string | null |
364+
| (stepEnter) | function(MovingDirection) | null |
365+
366+
294367
## Example
295-
You can find an basic example project using ng2-archwizard [here](https://madoar.github.io/ng2-archwizard-demo).
368+
You can find an basic example project using `ng2-archwizard` [here](https://madoar.github.io/ng2-archwizard-demo).
296369
The sources for the example can be found in the [ng2-archwizard-demo](https://github.com/madoar/ng2-archwizard-demo) repository.
297370
It illustrates how the wizard looks like and how the different settings can change its layout.

0 commit comments

Comments
 (0)