0.0.4 β’ Published 6 months ago
svelte-intro.js v0.0.4
svelte-intro.js
Installation
$ npm i svelte-intro.js --save-dev
Example 1
Hello World!
<script >
import IntroJs from "$lib/intro-js.svelte";
</script>
<IntroJs>
<div data-title="Welcome!" data-intro="Hello World! π" class="card-demo">
<div class="card shadow--md">
<div class="card__image" data-intro="Intro.js can highlight on elements">
<img src="https://fakeimg.pl/300/" alt="Image alt text" title="Logo Title Text 1" />
</div>
<div class="card__body" data-title="Farewell!" data-intro="And this is the last step!">
<h4>Quaco Lighthouse</h4>
<small>
The Quaco Head Lighthouse is a well maintained lighthouse close to St.
Martins. It is a short, beautiful walk to the lighthouse along the
seashore.
</small>
</div>
</div>
</div>
</IntroJs>
Example 2
JSON configuration
<script >
import IntroJs from "$lib/intro-js.svelte";
let options = {
steps: [{
title: 'Welcome',
intro: 'Hello World! πjson'
},
{
selector: '.card-demo',
intro: 'This step focuses on an image json'
},
{
title: 'Farewell!',
selector: '.card__image',
intro: 'And this is our final step! json'
}]
};
</script>
<IntroJs {options}>
<div data-title="Welcome!" data-intro="Hello World! π" class="card-demo">
<div class="card shadow--md">
<div class="card__image" data-intro="Intro.js can highlight on elements">
<img src="https://fakeimg.pl/300/" alt="Image alt text" title="Logo Title Text 1" />
</div>
<div class="card__body" data-title="Farewell!" data-intro="And this is the last step!">
<h4>Quaco Lighthouse</h4>
<small>
The Quaco Head Lighthouse is a well maintained lighthouse close to St.
Martins. It is a short, beautiful walk to the lighthouse along the
seashore.
</small>
</div>
</div>
</div>
</IntroJs>
For introjs documentation and more examples You can visit introjs
Author
Emrullah TUNCAY
License
MIT