WARNING: This is a UNSTABLE branch. Help us to develop a new Material Walkthrough based on ES6!
A material tour, based on Google's Inbox (Fullscreen Tooltip Message), for your site, enhancing the UX. See the demo here!
Nov, 2014 - "User Experience Design Concepts from Google Inbox" by Jake Rocheleau
- 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.
- Clean - No more jQuery as dependency!
- Made with love - Few nights without studying to develop this plugin with much love.
First, you just need to install the plugin from the NPM Registry.
npm install @essetwide/material-walkthrough@betaImport the script by your language. It not need any dependency!
If your module bundler supports import statements.
import MaterialWalkthrough from '@essetwide/material-walkthrough';If your project use require pattern.
const MaterialWalkthrough = require('@essetwide/material-walkthrough');If your project use plain JS, then you can download the ZIP from master here and extract it in your project.
Insert the js source in your html code and use the plugin through the MaterialWalkthrough global.
<body>
.
.
.
<!-- Material Walkthrough plugin -->
<script src="path/to/material-walkthrough/material-walkthrough.min.js"></script>
</body>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.
<a id="step1">Try it Now!</a>Just call the main method passing to it an array of your targets - we call it of WalkPoints.
MaterialWalkthrough.walk([
{
target: '#step1',
content: 'My First Walkthrough!',
acceptText: 'YEAH!'
}
]);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
http://www.apache.org/licenses/LICENSE-2.0
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.