SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillssyncfusion-javascript-stepper

syncfusion-javascript-stepper

Frontend & websites

View repository

Updated 10-16 02:06

About this skill

Implementing Syncfusion TypeScript Stepper Control

Complete Table of Contents

1. Getting Started

2. API Reference

  • Complete API Reference
    • Stepper Properties (15 properties)
    • Stepper Methods (12 methods)
    • Stepper Events (5 events)
    • Step Properties (8 properties)
    • Enums & Types (4 enums)
    • Animation Settings (3 properties)
    • Event Arguments (4 argument interfaces)

3. Core Concepts

  • Steps Configuration

    • Adding & Managing Steps
    • Step Properties (label, iconCss, text, disabled, optional, status, isValid)
    • Disabling Steps
    • Setting Read-Only Mode
    • Setting Active Step
    • Icon-Only, Label-Only, and Hybrid Steps
    • Validation States

  • Step Types

    • Default Type (Icons + Labels)
    • Label-Only Type
    • Indicator-Only Type
    • Label Positioning (Top, Bottom, Start, End)
    • Type Comparison & Selection
    • Switching Types Dynamically

  • Orientations & Layout

    • Horizontal Orientation (Default)
    • Vertical Orientation
    • Responsive Behavior
    • Dynamic Layout Switching
    • Layout-Specific Styling

4. Advanced Features

  • Events & Interaction

    • All 5 Events:
      • created
      • beforeStepRender
      • stepClick
      • stepChanging (with cancellation)
      • stepChanged
    • Event Arguments & Properties
    • Event Handling Patterns
    • Validation with Events
    • User Interaction Detection

  • Templates & Animation

    • Custom Step Templates
    • Template Context Variables
    • Template Data Binding
    • Tooltip Customization
    • Animation Configuration
    • Animation Duration & Delay
    • Animation Enable/Disable

  • Validation & Globalization

    • Step Validation (isValid states)
    • Linear Flow Enforcement
    • Preventing Invalid Transitions
    • Localization (L10n, Locale)
    • Right-to-Left (RTL) Support
    • Multi-Language Support
    • Accessibility (ARIA, Keyboard Navigation)

5. Utilities & Patterns

  • Troubleshooting & Best Practices
    • Common Setup Issues
    • Event Handling Best Practices
    • Form Validation Patterns
    • CSS Customization
    • Theme Integration
    • Performance Optimization
    • Edge Cases & Solutions

When to Use This Skill

Use the Syncfusion TypeScript Stepper skill when you need to:

  • Display a multi-step process or wizard workflow
  • Create a progress indicator showing completion status
  • Build a form wizard with validation between steps
  • Show step-by-step guided experiences (checkout, onboarding, setup)
  • Add step navigation with back/forward controls
  • Implement linear workflow validation
  • Create checkpoint-based processes with tracking
  • Enable step customization with icons, labels, and templates
  • Handle step events and user interactions
  • Support multiple orientations (horizontal/vertical layouts)

Stepper Overview

The Stepper is a navigation control that displays a series of logical steps to guide users through a workflow. Each step can have:

  • Indicators (numbers, icons, or shapes)
  • Labels (text descriptions)
  • Status tracking (active, completed, disabled)
  • Event handlers for step transitions
  • Custom templates for rich content
  • Flexible styling with themes

Key Characteristics

Aspect Description
Component Navigation control for multi-step workflows
Steps Array of step objects with properties
Indicators Numbered or icon-based step markers
Orientations Horizontal (default) or Vertical layouts
Types Default (icon+label), Label-only, Indicator-only
Events created, beforeStepRender, stepClick, stepChanging, stepChanged
Methods 12 control methods (nextStep, previousStep, reset, etc.)
Properties 15 stepper + 8 step properties
Customization Templates, animations, themes, CSS styling

Documentation and Navigation Guide

📚 Learning Path (Recommended Order)

  1. Start Here: Getting Started

    • Installation and npm package setup
    • Dependencies (ej2-navigations, ej2-base, ej2-popups)
    • Development environment configuration
    • Basic stepper initialization with code examples
    • CSS imports and theme setup

  2. Fundamentals: Steps Configuration

    • Adding steps to the stepper
    • Step properties (iconCss, text, label, cssClass, disabled, status)
    • Using StepModel interface for type safety
    • Step arrays and dynamic step updates
    • Accessing and modifying steps at runtime

  3. Data Organization: Step Types

    • Default type: icons with labels
    • Label-only type: text descriptions only
    • Indicator-only type: numbers or icons only
    • Label positions (top, bottom, start, end)
    • Choosing the right type for your use case

  4. UI Layout: Orientations and Layout

    • Horizontal orientation (default, side-by-side)
    • Vertical orientation (stacked, one above another)
    • Responsive behavior and switching
    • Layout-specific styling

  5. Interactivity: Events and Interaction

    • stepChanged: when step successfully changes
    • stepChanging: before step change (can cancel)
    • stepClick: user clicked a step
    • beforeStepRender: before rendering each step
    • created: initialization complete
    • Event arguments and patterns

  6. Enhancements: Templates and Animation

    • Custom HTML templates for step content
    • Template data binding
    • Animation settings and timing
    • Animation duration and delay
    • Tooltip customization

  7. Production: Validation and Globalization

    • Form validation patterns
    • Linear workflow enforcement
    • Multi-language support
    • Right-to-left (RTL) support
    • Accessibility compliance

  8. Troubleshooting: Best Practices

    • Common issues and solutions
    • Performance optimization
    • CSS customization
    • Theme integration
    • Edge cases

🔍 Quick Navigation by Topic

By Feature:

By Use Case:

By API Lookup:

Quick Start Example

Here's a minimal stepper setup to get started immediately:

import { Stepper } from '@syncfusion/ej2-navigations';

// Create a basic stepper with 4 steps
let stepper: Stepper = new Stepper({
  steps: [
    { label: 'Cart' },
    { label: 'Shipping' },
    { label: 'Payment' },
    { label: 'Confirmation' }
  ]
});

// Render to DOM
stepper.appendTo('#stepper');

<nav id="stepper"></nav>

Common Patterns

Pattern 1: Icon + Label Steps (Default)

import { Stepper, StepModel } from '@syncfusion/ej2-navigations';

let steps: StepModel[] = [
  { iconCss: 'sf-icon-cart', label: 'Cart' },
  { iconCss: 'sf-icon-truck', label: 'Shipping' },
  { iconCss: 'sf-icon-payment', label: 'Payment' }
];

let stepper: Stepper = new Stepper({ steps: steps });
stepper.appendTo('#stepper');

Pattern 2: Vertical Workflow with Events

import { Stepper } from '@syncfusion/ej2-navigations';

let stepper: Stepper = new Stepper({
  steps: [{}, {}, {}, {}],
  orientation: 'Vertical',
  stepChanged: (args) => console.log('Changed to step:', args.activeStep),
  stepChanging: (args) => {
    if (!validateCurrentStep()) args.cancel = true;
  }
});
stepper.appendTo('#stepper');

Pattern 3: Form Wizard with Validation

import { Stepper, StepperChangingEventArgs } from '@syncfusion/ej2-navigations';

let stepper: Stepper = new Stepper({
  steps: [
    { label: 'Personal Info' },
    { label: 'Address' },
    { label: 'Review' }
  ],
  linear: true,  // Must complete steps in order
  stepChanging: (args: StepperChangingEventArgs) => {
    // Validate current step before allowing transition
    if (!isCurrentStepValid()) {
      args.cancel = true;  // Prevent step change
    }
  }
});
stepper.appendTo('#stepper');

Pattern 4: Dynamic Step Management

import { Stepper } from '@syncfusion/ej2-navigations';

let stepper: Stepper = new Stepper({
  steps: [{}, {}, {}, {}],
  activeStep: 0
});
stepper.appendTo('#stepper');

// Navigate with methods
stepper.nextStep();      // Move to next step
stepper.previousStep();  // Move to previous step
stepper.reset();         // Return to first step

// Update properties
stepper.activeStep = 2;
stepper.dataBind();      // Apply changes

Key Properties at a Glance

Stepper Control Properties

Property Type Default Description
steps StepModel[] [] Array of step definitions
activeStep number 0 Currently active step (zero-based)
stepType string 'Default' Type: Default, Label, or Indicator
orientation string 'Horizontal' Layout: Horizontal or Vertical
labelPosition string 'Bottom' Label placement: Top, Bottom, Start, End
linear boolean false Enforce sequential navigation
readOnly boolean false Disable all interactions
showTooltip boolean false Show tooltips on steps
animation object {...} Animation settings (enable, duration, delay)
locale string 'en-US' Language/region code
enableRtl boolean false Right-to-left rendering
enablePersistence boolean false Save state in localStorage

Step Properties

Property Type Default Description
label string '' Step label text
text string '' Step description
iconCss string '' Step icon CSS class
status string 'NotStarted' NotStarted, InProgress, Completed
isValid boolean | null null Validation state (true/false/null)
disabled boolean false Disable this step
optional boolean false Step is optional
cssClass string '' Custom CSS class

Common Use Cases

Checkout Wizard: Multi-step purchase flow with cart, shipping, payment, and confirmation steps.

Form Wizard: Split long forms across multiple steps with validation at each stage.

Onboarding Flow: Guide new users through setup steps with progress indication.

Task Workflow: Track progress through a series of tasks or milestones.

Process Tracker: Display current position in a documented process flow.

Multi-Page Survey: Distribute survey questions across steps with progress tracking.

API Reference Quick Links

  • Complete API Documentation
    • Stepper Properties (15 total)
    • Stepper Methods (12 total)
    • Stepper Events (5 total)
    • Step Properties (8 total)
    • Enums (4 types)
    • Animation Settings
    • Event Arguments

🚀 Ready to implement? Start with Getting Started to set up your first stepper, or jump to the API Reference for complete documentation.