This is the STABLE branch, that uses jQuery as the core. Check the V2 (under development) branch for a Pure ES6 implementation.
- Material Design - Have a Material look, based on the tour presented by Google Inbox.
- Customizable - Change the content and colors easily.
- Responsive - Resize the screen and continue enjoying your Walkthrough.
- Simple - With a few lines of code you will got a Walkthrough.
- Compatible - Google Chrome 52.0; Firefox 48.0.2; Microsoft Edge 38.14393.0.0.
- Made with love - Few nights without studying to develop this plugin with much love.
Using through NPM
First, you just need to install the plugin from the NPM Registry.
npm install @essetwide/material-walkthrough --save
Import the script by your language. Remember that this version of Material Walkthrough depends to have jQuery installed.
If your module bundler supports
import $ from 'jquery'; // Importing jQuery firstimport '@essetwide/material-walkthrough'; // Import the package globalyimport '@essetwide/material-walkthrough/dist/material-walkthrough.css'; // Import the style
If your project use
var $ = ; // Importing jQuery first; // Import the package globaly; // Import the style
Using by the ZIP
1. Download and extract the Source
You can download the ZIP from master here and extract it in your project.
2. Settup your Code
Load jQuery and include Material-Walkthrough plugin files.
...<!-- Material Walkthrough styles -->...<!-- JQuery 3.1 minified --><!-- Material Walkthrough plugin -->
Using the Plugin
1. Setup your HTML
You don't need any special markup. All you need is add something to identify your HTML element - an
id or a
class, by example.
Try it Now!
2. Call the plugin
Now call the Material Walkthrough initializer function and your walkthrough is ready.
Copyright 2018 Esset Software LTD.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this files except in compliance with the License. You may obtain a copy of the License at
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
- Thanks to @galambalazs for the Lock Scroll code.