by

SafariTabList



A stepper plugin for Bootstrap 4.

We make Stack Overflow and 170+ other community-powered Q&A sites.

Browser tabs to Dropbox HTML list. GitHub Gist: instantly share code, notes, and snippets. “SPECIAL NEEDS”. “special needs”. Remove cookies from Safari. GitHub Gist: instantly share code, notes, and snippets.

You can use it on React and Angular too because this plugin is written with the most used JavaScript framework: VanillaJS.

If you want to see our last changes it's here: https://bs-stepper.netlify.com/

Features:

  • Linear stepper
  • Non linear stepper
  • Fade effect with .fade
  • Vertical stepper
  • Works with Bootstrap 4
  • Accessible
  • Works without dependencies (so no jQuery needed)
  • Built in UMD to be used everywhere
  • Small, only 2kb

Table of contents

Install

With npm or yarn

CDN

CDNLink
jsDelivr, js minifiedhttps://cdn.jsdelivr.net/npm/bs-stepper/dist/js/bs-stepper.min.js
jsDelivr, css minifiedhttps://cdn.jsdelivr.net/npm/bs-stepper/dist/css/bs-stepper.min.css

How to use it

HTML markup

Include the CSS file:

Add the following HTML:

  • If you want to use the fade fade animation, add .fade class on your .content and set animation to true.
  • To create a vertical stepper, just add .vertical class on your stepper. All steppers will switch to vertical on small viewports.

JavaScript

In HTML before the end of the <body> tag

Or with npm

Create a stepper

You should wait for the document ready event and create a new instance of Stepper.

Vanilla JS

With jQuery

For more examples check out this file.

This library is UMD ready so you can use it everywhere.

Tabs

Methods

constructor

Create an instance of Stepper, accept two parameters.

Parameters

  • element
  • type: DOMElement

Pass your Stepper DOMElement

  • options (optional)

    • type: Object

    default value:

    Allows you to customize the stepper selectors and it's behaviour.

next

Will navigate to the next step of your stepper. This method also emit show.bs-stepper before showing the step andshown.bs-stepper when the step is displayed.

previous

Will navigate to the previous step of your stepper. This method also emit show.bs-stepper before showing the step andshown.bs-stepper when the step is displayed.

to

Will navigate to a step of your stepper. This method also emit show.bs-stepper before showing the step andshown.bs-stepper when the step is displayed.

reset

Will reset you stepper to the first step (usefull for linear stepper). This method also emit show.bs-stepper before showing the step andshown.bs-stepper when the step is displayed.

destroy

Safari tablet

Remove stored data relative to your stepper and listeners.

Events

The methods which trigger a step change trigger two events:

  • show.bs-stepper
  • shown.bs-stepper

You can listen on those events like that:

SafariTabList

The event detail object contains the following properties:

If you need to prevent the display of a step, you have to call preventDefault on the show.bs-stepper listener.

Compatibility

bsStepper is compatible with:

  • IE10+
  • Edge
  • Firefox
  • Chrome
  • Safari
  • Chrome Android
  • Safari iOS

You can find our BrowserStack list of browsers here.

Support me

Safari Tabs

If you want to thank me or supporting my work:

  • You can become my Patron
  • Or buy me a coffee: PayPal

Thanks

Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers!

Safari Tablet Clear Cache And Cookies

License

Safari tabsSafariTabList

Current Tags

  • 1.7.0 ... latest (2 years ago)

12 Versions

  • 1.7.0 ... 2 years ago
  • 1.6.1 ... 2 years ago
  • 1.6.0 ... 2 years ago
  • 1.5.0 ... 2 years ago
  • 1.4.1 ... 2 years ago
  • 1.4.0 ... 2 years ago
  • 1.3.0 ... 2 years ago
  • 1.2.1 ... 2 years ago
  • 1.2.0 ... 3 years ago
  • 1.1.1 ... 3 years ago
  • 1.1.0 ... 3 years ago
  • 1.0.0 ... 3 years ago