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: [