diff --git a/src/app/playground-components.ts b/src/app/playground-components.ts index dec2885b04..df76abfe25 100644 --- a/src/app/playground-components.ts +++ b/src/app/playground-components.ts @@ -952,6 +952,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [ component: 'StepperVerticalComponent', name: 'Stepper Vertical', }, + { + path: 'stepper-disabled-step-nav.component', + link: '/stepper/stepper-disabled-step-nav.component', + component: 'StepperDisabledStepNavComponent', + name: 'Stepper Disabled Step Nav', + }, { path: 'stepper-linear.component', link: '/stepper/stepper-linear.component', diff --git a/src/framework/theme/components/stepper/stepper.component.html b/src/framework/theme/components/stepper/stepper.component.html index 43c2c6c083..5f712a0668 100644 --- a/src/framework/theme/components/stepper/stepper.component.html +++ b/src/framework/theme/components/stepper/stepper.component.html @@ -9,7 +9,8 @@
+ [class.noninteractive]="disableStepNavigation" + (click)="!disableStepNavigation && step.select()">
{{ index + 1 }} diff --git a/src/framework/theme/components/stepper/stepper.component.scss b/src/framework/theme/components/stepper/stepper.component.scss index b51a8e49ec..9735a7d5e2 100644 --- a/src/framework/theme/components/stepper/stepper.component.scss +++ b/src/framework/theme/components/stepper/stepper.component.scss @@ -41,6 +41,9 @@ display: flex; align-items: center; cursor: pointer; + &.noninteractive { + cursor: default; + } } .label-index { diff --git a/src/framework/theme/components/stepper/stepper.component.ts b/src/framework/theme/components/stepper/stepper.component.ts index 71983b7f9e..0b562cc5d4 100644 --- a/src/framework/theme/components/stepper/stepper.component.ts +++ b/src/framework/theme/components/stepper/stepper.component.ts @@ -77,6 +77,10 @@ export enum NbStepperOrientation { * Stepper component has two layout options - `vertical` & `horizontal` * @stacked-example(Vertical, stepper/stepper-vertical.component) * + * `disableStepNavigation` disables navigation by clicking on steps, so user can navigate only using + * 'nbStepperPrevious' and 'nbStepperNext' buttons. + * @stacked-example(Disabled steps navigation, stepper/stepper-disabled-step-nav.component) + * * @styles * * stepper-index-size: @@ -129,6 +133,19 @@ export class NbStepperComponent { } } + /** + * Disables navigation by clicking on steps. False by default + * @param {boolean} value + */ + @Input() + set disableStepNavigation(value: boolean) { + this.disableStepNavigationValue = convertToBoolProperty(value); + } + get disableStepNavigation(): boolean { + return this.disableStepNavigationValue; + } + disableStepNavigationValue: boolean = false; + /** * Selected step component * diff --git a/src/playground/with-layout/stepper/stepper-disabled-step-nav.component.ts b/src/playground/with-layout/stepper/stepper-disabled-step-nav.component.ts new file mode 100644 index 0000000000..dd87bb8d9b --- /dev/null +++ b/src/playground/with-layout/stepper/stepper-disabled-step-nav.component.ts @@ -0,0 +1,37 @@ +import { Component } from '@angular/core'; + +@Component({ + template: ` + + + + + First step +

Step content #1

+ + +
+ + Second step +

Step content #2

+ + +
+ +

Step content #3

+ + +
+ + Fourth step +

Step content #4

+ + +
+
+
+
+ + `, +}) +export class StepperDisabledStepNavComponent {} diff --git a/src/playground/with-layout/stepper/stepper-routing.module.ts b/src/playground/with-layout/stepper/stepper-routing.module.ts index 9b0605e6f1..aa75d3cc5f 100644 --- a/src/playground/with-layout/stepper/stepper-routing.module.ts +++ b/src/playground/with-layout/stepper/stepper-routing.module.ts @@ -10,6 +10,7 @@ import { StepperShowcaseComponent } from './stepper-showcase.component'; import { StepperTestComponent } from './stepper-test.component'; import { StepperValidationComponent } from './stepper-validation.component'; import { StepperVerticalComponent } from './stepper-vertical.component'; +import { StepperDisabledStepNavComponent } from './stepper-disabled-step-nav.component'; import { StepperLinearComponent } from './stepper-linear.component'; const routes: Route[] = [ @@ -29,6 +30,10 @@ const routes: Route[] = [ path: 'stepper-vertical.component', component: StepperVerticalComponent, }, + { + path: 'stepper-disabled-step-nav.component', + component: StepperDisabledStepNavComponent, + }, { path: 'stepper-linear.component', component: StepperLinearComponent, diff --git a/src/playground/with-layout/stepper/stepper.module.ts b/src/playground/with-layout/stepper/stepper.module.ts index df5d9a0235..c534816213 100644 --- a/src/playground/with-layout/stepper/stepper.module.ts +++ b/src/playground/with-layout/stepper/stepper.module.ts @@ -13,6 +13,7 @@ import { StepperShowcaseComponent } from './stepper-showcase.component'; import { StepperTestComponent } from './stepper-test.component'; import { StepperValidationComponent } from './stepper-validation.component'; import { StepperVerticalComponent } from './stepper-vertical.component'; +import { StepperDisabledStepNavComponent } from './stepper-disabled-step-nav.component'; import { StepperLinearComponent } from './stepper-linear.component'; @NgModule({ @@ -21,6 +22,7 @@ import { StepperLinearComponent } from './stepper-linear.component'; StepperTestComponent, StepperValidationComponent, StepperVerticalComponent, + StepperDisabledStepNavComponent, StepperLinearComponent, ], imports: [