initial commit of stepper component
This commit is contained in:
parent
854814d2ac
commit
f2217a4a38
|
@ -0,0 +1,26 @@
|
||||||
|
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'step',
|
||||||
|
template: `
|
||||||
|
|
||||||
|
|
||||||
|
<div class=" uk-width-auto" >
|
||||||
|
<button class="uk-icon-button uk-border-circle" [class]="status" [class.uk-disabled]="status=='disabled'"
|
||||||
|
(click)="stepChanged.emit(stepId)">
|
||||||
|
<span *ngIf="status != 'done'">{{stepNumber}}</span>
|
||||||
|
<span *ngIf="status == 'done'" uk-icon="check"></span>
|
||||||
|
</button>
|
||||||
|
<span class="uk-margin-small-left stepper-text" [class]="status">{{stepText}}</span>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
|
||||||
|
})
|
||||||
|
export class StepComponent {
|
||||||
|
@Input() status: 'active' | 'default' | 'disabled' | 'done';
|
||||||
|
@Input() stepId;
|
||||||
|
@Input() stepNumber;
|
||||||
|
@Input() stepText;
|
||||||
|
@Input() active;
|
||||||
|
@Output() stepChanged: EventEmitter<string> = new EventEmitter<string>();
|
||||||
|
}
|
|
@ -0,0 +1,16 @@
|
||||||
|
import {Component, Input} from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'step-line',
|
||||||
|
template: `
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="stepper-line uk-margin-small-left" [class]="status"></div>
|
||||||
|
`
|
||||||
|
|
||||||
|
})
|
||||||
|
export class StepLineComponent {
|
||||||
|
@Input() status: 'active' | 'default' | 'disabled' | 'done';
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,19 @@
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'stepper',
|
||||||
|
template: `
|
||||||
|
<div class="stepper" >
|
||||||
|
<div class=" uk-flex uk-flex-center uk-text-small" >
|
||||||
|
<div class=" uk-grid uk-flex uk-flex-center uk-flex-middle uk-width-auto">
|
||||||
|
<ng-content></ng-content>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
`
|
||||||
|
|
||||||
|
})
|
||||||
|
export class StepperComponent {
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import {SharedModule} from "../../../../shared/shared.module";
|
||||||
|
import {StepperComponent} from "./stepper.component";
|
||||||
|
import {StepComponent} from "./step.component";
|
||||||
|
import {StepLineComponent} from "./stepLine.component";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
SharedModule,
|
||||||
|
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
StepperComponent, StepComponent, StepLineComponent
|
||||||
|
], exports: [StepperComponent, StepComponent, StepLineComponent ]
|
||||||
|
})
|
||||||
|
export class StepperModule { }
|
Loading…
Reference in New Issue