Stepper.JS 2.2.12

Enhances UI with intuitive step-by-step navigation with stepper vanilla JS library. Stepper.JS is a versatile vanilla JavaScript library designed to simplify the implementation of step-by-step user interfaces. With Stepper.JS, developers can create intuitive and interactive workflows, guiding users through complex processes with ease. Let's delve into the documentation to explore its features, usage, and customization options.

Installation

npm

npm install npm.stepper.js

yarn

yarn add npm.stepper.js

pnpm

pnpm add npm.stepper.js

Introduction to Stepper.JS

Stepper.JS version 2.2.12 is new features, 100% faster and more flexible JavaScript library compared to the previous version, enabling developers to easily build step-by-step navigation. Whether you're designing a multi-step form, a guided tour, or a wizard-like interface, Stepper.JS provides the necessary tools to streamline the user experience. (1.8T ops/s ± 28.77% Fastest)

Overview of npm.stepper.js

Your npm.stepper.js package, built on the vanilla JavaScript library Stepper.js, is versatile and designed to function seamlessly across various project setups, including Gulp.js, Angular, and React.

1. Base Library: Derived from stepper.js, a minimalistic vanilla JavaScript library focused on creating interactive, step-based interfaces without relying on heavy dependencies.
2. Modular Integration: It’s optimized for integration within modern JavaScript frameworks and build tools, ensuring compatibility across diverse environments.

Key Features

1. Ease of Integration

1. Compatible with Gulp.js, enabling custom build processes
2. Works smoothly in React, allowing it to serve as a reusable component across frameworks.

2. Usage

1. Gulp.js: Import and initialize within Gulp tasks, with options for custom configurations.
2. React: react-smart-stepper.

Features

Stepper.JS offers a range of features to enhance UI navigation:

1. Step-by-Step Navigation: Easily organize content into sequential steps, guiding users through a predefined workflow.
2. Intuitive Interface: The intuitive interface ensures users understand their progress and the next steps to take.
3. Customizable: Customize the appearance and behavior of the stepper to match your application's design and requirements.
4. Responsive Design: Stepper.JS adapts seamlessly to various screen sizes, ensuring a consistent user experience across devices.

Getting Started

To start using Stepper.JS in your project, follow these simple steps:

1. Include the Library: Add the Stepper.JS library to your project. You can either download the library files.
2. HTML Structure: Define the HTML structure for your stepper interface. Use div elements with appropriate classes to represent tabs, content panes, and navigation buttons.
3. Initialize the Stepper: Initialize the stepper by calling the stepper function and passing the container selector along with any optional configuration options.
4. Customize: Customize the stepper by adjusting options such as container width, indicator visibility, and callback functions for button events.

Example Usage

Stepper.JS Demo

<!-- HTML -->
<div class="st-container" st-container-1>
    <div class="st-group">
        <div class="st-tabs">
            <div class="st-tab">
                <div class="st-tab-block">
                    <h3>Title</h3>
                </div>
            </div>
            <div class="st-tab">
                <div class="st-tab-block">
                    <h3>Title</h3>
                </div>
            </div>
            <div class="st-tab">
                <div class="st-tab-block">
                    <h3>Title</h3>
                </div>
            </div>
        </div>
        <div class="st-content">
            <div class="st-pane">
                Step 1
            </div>
            <div class="st-pane">
                Step 2
            </div>
            <div class="st-pane">
                Step 3
            </div>
        </div>
        <div class="st-bottom d-flex flex-wrap justify-content-between">
            <div>
                <button type="button" class="st-button prev-step">Previous</button>
            </div>
            <div>
                <button type="button" class="st-button next-step ml-1">Next</button>
                <button type="button" class="st-button submit-step ml-1">Submit</button>
            </div>
        </div>
    </div>
</div>

//gulpfile.js
gulp.task('styles', () => {
    return gulp.src(['node_modules/npm.stepper.js/dist/css/stepper.min.css', 'scss/*.scss','scss/**/*.scss'])
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)).pipe(gulp.dest('dist/css'))
});
gulp.task('javascript', () => {
    return gulp.src(['node_modules/npm.stepper.js/dist/js/stepper.min.js', 'js/*.js'])
    .pipe(concat('main.min.js')).pipe(uglify()).pipe(gulp.dest('dist/js'))  
});

// main.js
document.addEventListener("DOMContentLoaded", function() {
    const stepper1 = stepper('[st-container-1]',
        options = {
            containerWidth: 420,
            indicator: {
                visible: true,
                theme: "Default",
            },
            submitted: false,
            allTabsDisabled: true,
            containerId: (id) => {
                console.log(id);
            },
            nextButtonEvent: (e, options) => {
                console.log('Next button clicked!');
                options.nextButtonProcess(options.currentStep);
            },
            prevButtonEvent: (e) => {
                console.log('Prev button clicked!');
            },
            submitButtonEvent: (e) => {
                console.log('Submit button clicked!');
            },
            tabButtonEvent:(e) => {
                console.log('Tab button clicked!');
            }
        }
    );
});

options