sirius-stepper-2
v0.0.4
Published
An Angular library for a Stepper UI component
Downloads
6
Readme
SiriusStepper
An Angular library for a Stepper UI component.
This library was generated with Angular CLI version 13.2.0
Usage
Install library
npm install --save sirius-stepper
Import module in your application
import { SiriusStepperModule } from 'sirius-stepper';
@NgModule({
...
imports: [ SiriusStepperModule ],
...
})
Example App
See the example app for a working example.
Development: Build library and link locally
Clone and enter
$/> git clone https://github.com/dav793/sirius-stepper.git $/> cd sirius-stepper $/sirius-stepper>
Install dependencies
$/sirius-stepper> npm install
Build lib
Production:
$/sirius-stepper> ng build sirius-stepper
Development:
$/sirius-stepper> ng build sirius-stepper --watch
Link lib build with NPM locally
$/sirius-stepper> cd dist/sirius-stepper $/sirius-stepper/dist/sirius-stepper> npm link
Link back in your application
$/> cd ${APP_ROOT} $/APP_ROOT> npm link sirius-stepper
(Optional) In order for
ng serve
to work properly, open your application'sangular.json
and add the following key-value pair underprojects.{YOUR APP}.architect.build.options
:"preserveSymlinks": true
This step should not be necessary if you only build your application in production.
When you're ready to publish a new version to npm, go to
/projects/sirius-stepper
and bump the latest version.npm version patch
Or
npm version minor
Or
npm version major
Then, publish to NPM
npm publish
Docs
lib-sirius-stepper
This component wraps around your logo and steps, and provides the stepper functionality.
As an example:
<lib-sirius-stepper
highlight-color="#ff9949"
muted-color="#aaaaaa"
font-family="Helvetica"
font-size="12px"
hover-size="1.5"
[override-step]="overrideStepIndex$"
(steps)="stepsChanged($event)"
(step-changes)="stepIndexChanged($event)"
#stepper
>
<!-- add your logo here -->
<!-- add your title here -->
<!-- add your steps here -->
</lib-sirius-stepper>
Properties
highlight-color
(optional)Type:
string
Range : any valid CSScolor
.Set the color of highlighted graphics and text.
muted-color
(optional)Type:
string
Range : any valid CSScolor
.Set the color of muted graphics and text.
font-family
(optional)Type:
string
Range : any valid CSSfont-family
.Set the font used in text.
font-size
(optional)Type:
string
Range : any valid value for the CSS propertyfont-size
.Set the size of text.
hover-size
(optional)Type:
string
Range : any percentual value, where a value of1
equals 100%. Eg.1
,1.5
,0.75
, etc.Set the size of the step bubbles on mouse hover.
[override-step]
(optional)Type:
Observable<number>
Use this Input to manually override the current step viewed.
If you provide an Observable, whenever it emits a number, it will set the current step index to it.
(steps)
(optional)Type:
EventEmitter<number[]>
On this Output, the stepper component will emit an array containing the indexes of all steps, whenever they are changed in the template.
(step-changes)
(optional)Type:
EventEmitter<number>
On this Output, the stepper component will emit the current step's index, whenever it changes.
#stepper
Required template reference to link the steps with the stepper component.
sirius-logo
Add an ng-template
tag with this directive inside the stepper component to set your company logo.
As an example:
<lib-sirius-stepper
...
#stepper
>
<ng-template sirius-logo>
<!-- Add your logo HTML here -->
<img src="/assets/logo.png" alt="image">
</ng-template>
</lib-sirius-stepper>
sirius-title
Add an ng-template
tag with this directive inside the stepper component to set your company title.
As an example:
<lib-sirius-stepper
...
#stepper
>
<ng-template sirius-title>
<!-- Add your title HTML here -->
<h1>Your Product Name</h1>
</ng-template>
</lib-sirius-stepper>
sirius-step
Add an ng-template
tag with this directive inside the stepper component to insert each step.
As an example:
<lib-sirius-stepper
...
#stepper
>
<!-- Add your steps here -->
<ng-template sirius-step
[link]="stepper"
[step]="1"
label="YOUR STEP TITLE"
>
<!-- Put any HTML you want inside the step -->
<h2>Step 1</h2>
<label for="name">Name</label>
<input id="name" type="text" [(ngModel)]="model.name"/>
</ng-template>
</lib-sirius-stepper>
Properties
[link]
Type:
SiriusStepperComponent
Required to link the step with the stepper component.
[step]
Type:
number
Set a unique index for the step. The steps will be ordered in ascending order by their step index.
label
(optional)Type:
string
Set the text to label this step in the step controls.