mirror of
https://github.com/kamranahmedse/driver.js.git
synced 2026-10-31 03:52:13 +08:00
Add animated and static examples
This commit is contained in:
Kamran Ahmed
+1
-1
@@ -20,7 +20,7 @@
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-fast-marquee": "^1.6.0",
|
||||
"tailwindcss": "^3.3.2"
|
||||
"tailwindcss": "^3.0.24"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/typography": "^0.5.9"
|
||||
|
||||
Generated
+1
-1
@@ -36,7 +36,7 @@ dependencies:
|
||||
specifier: ^1.6.0
|
||||
version: 1.6.0(react-dom@18.2.0)(react@18.2.0)
|
||||
tailwindcss:
|
||||
specifier: ^3.3.2
|
||||
specifier: ^3.0.24
|
||||
version: 3.3.2
|
||||
|
||||
devDependencies:
|
||||
|
||||
@@ -12,6 +12,7 @@ The following example shows how to create a simple tour with a few steps. Click
|
||||
heading={'Basic Animated Tour'}
|
||||
config={{
|
||||
animate: true,
|
||||
showProgress: true,
|
||||
showButtons: ['next', 'previous'],
|
||||
}}
|
||||
tour={[
|
||||
@@ -20,6 +21,7 @@ The following example shows how to create a simple tour with a few steps. Click
|
||||
{ element: '.line:nth-child(2)', popover: { title: 'Importing CSS', description: 'Import the CSS which gives you the default styling for popover and overlay.', side: "bottom", align: 'start' }},
|
||||
{ element: '.line:nth-child(4) span:nth-child(7)', popover: { title: 'Create Driver', description: 'Simply call the driver function to create a driver.js instance', side: "left", align: 'start' }},
|
||||
{ element: '.line:nth-child(17)', popover: { title: 'Start Tour', description: 'Call the drive method to start the tour and your tour will be started.', side: "top", align: 'start' }},
|
||||
{ element: '.line:nth-child(5)', popover: { title: 'Hide Progress', description: 'Progress shown in the bottom left is hidden by default. You can make driver show/hide the progress using this option.', side: "top", align: 'start' }},
|
||||
{ element: 'a[href="/docs/configuration"]', popover: { title: 'More Configuration', description: 'Look at this page for all the configuration options you can pass.', side: "right", align: 'start' }},
|
||||
{ popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }
|
||||
]}
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
---
|
||||
title: "Static Tour"
|
||||
groupTitle: "Examples"
|
||||
sort: 2
|
||||
---
|
||||
|
||||
import { CodeSample } from "../../components/CodeSample.tsx";
|
||||
|
||||
You can simply set `animate` option to `false` to make the tour static. This will make the tour not animate between steps and will just show the popover.
|
||||
|
||||
<CodeSample
|
||||
heading={'Basic Static Tour'}
|
||||
config={{
|
||||
animate: false,
|
||||
showProgress: false,
|
||||
showButtons: ['next', 'previous'],
|
||||
}}
|
||||
tour={[
|
||||
{ element: '#tour-example', popover: { title: 'Animated Tour Example', description: 'Here is the code example showing animated tour. Let\'s walk you through it.', side: "left", align: 'start' }},
|
||||
{ element: '.line:nth-child(1)', popover: { title: 'Import the Library', description: 'It works the same in vanilla JavaScript as well as frameworks.', side: "bottom", align: 'start' }},
|
||||
{ element: '.line:nth-child(2)', popover: { title: 'Importing CSS', description: 'Import the CSS which gives you the default styling for popover and overlay.', side: "bottom", align: 'start' }},
|
||||
{ element: '.line:nth-child(4) span:nth-child(7)', popover: { title: 'Create Driver', description: 'Simply call the driver function to create a driver.js instance', side: "left", align: 'start' }},
|
||||
{ element: '.line:nth-child(19)', popover: { title: 'Start Tour', description: 'Call the drive method to start the tour and your tour will be started.', side: "top", align: 'start' }},
|
||||
{ element: '.line:nth-child(6)', popover: { title: 'Hide Progress', description: 'Progress shown in the bottom left is hidden by default. You can make driver show/hide the progress using this option.', side: "top", align: 'start' }},
|
||||
{ element: 'a[href="/docs/configuration"]', popover: { title: 'More Configuration', description: 'Look at this page for all the configuration options you can pass.', side: "right", align: 'start' }},
|
||||
{ popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }
|
||||
]}
|
||||
id={"tour-example"}
|
||||
client:load
|
||||
>
|
||||
```js
|
||||
import { driver } from "driver.js";
|
||||
import "driver.js/dist/driver.css";
|
||||
|
||||
const driverObj = driver({
|
||||
animate: false,
|
||||
showProgress: false,
|
||||
showButtons: ['next', 'previous', 'close'],
|
||||
steps: [
|
||||
{ element: '#tour-example', popover: { title: 'Animated Tour Example', description: 'Here is the code example showing animated tour. Let\'s walk you through it.', side: "left", align: 'start' }},
|
||||
{ element: 'code .line:nth-child(1)', popover: { title: 'Import the Library', description: 'It works the same in vanilla JavaScript as well as frameworks.', side: "bottom", align: 'start' }},
|
||||
{ element: 'code .line:nth-child(2)', popover: { title: 'Importing CSS', description: 'Import the CSS which gives you the default styling for popover and overlay.', side: "bottom", align: 'start' }},
|
||||
{ element: 'code .line:nth-child(4) span:nth-child(7)', popover: { title: 'Create Driver', description: 'Simply call the driver function to create a driver.js instance', side: "left", align: 'start' }},
|
||||
{ element: 'code .line:nth-child(18)', popover: { title: 'Start Tour', description: 'Call the drive method to start the tour and your tour will be started.', side: "top", align: 'start' }},
|
||||
{ element: 'a[href="/docs/configuration"]', popover: { title: 'More Configuration', description: 'Look at this page for all the configuration options you can pass.', side: "right", align: 'start' }},
|
||||
{ popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }
|
||||
]
|
||||
});
|
||||
|
||||
driver.drive();
|
||||
```
|
||||
</CodeSample>
|
||||
@@ -11,19 +11,19 @@ const starCount = getFormattedStars('kamranahmedse/driver.js');
|
||||
<BaseLayout>
|
||||
<div class="bg-yellow-300">
|
||||
<Container>
|
||||
<div class="py-24 flex justify-start items-center gap-4">
|
||||
<div class="py-10 md:py-24 flex justify-start items-center gap-4">
|
||||
<div class="flex-grow">
|
||||
<h1 class="text-9xl mb-4 font-bold">driver.js</h1>
|
||||
<p class="text-3xl">Product tours, highlights, contextual help and more.</p>
|
||||
<div class="mt-12 mb-2 flex gap-2 items-stretch">
|
||||
<button class="bg-black rounded-xl py-4 px-5 font-medium text-white text-xl">Show Demo Tour</button>
|
||||
<h1 class="text-5xl md:text-9xl mb-2 md:mb-4 font-bold">driver.js</h1>
|
||||
<p class="text-md md:text-3xl">Product tours, highlights, contextual help and more.</p>
|
||||
<div class="mt-4 md:mt-12 mb-2 flex gap-2 items-stretch">
|
||||
<button class="bg-black rounded-lg md:rounded-xl py-2 md:py-4 px-5 font-medium text-white text-base md:text-xl">Show Demo Tour</button>
|
||||
<a href="/docs/installation"
|
||||
class="flex items-center font-bold text-xl border-4 border-black rounded-xl px-5 bg-white">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<div class="flex-shrink-0 hidden md:flex">
|
||||
<img src="/driver.svg" alt="Hero Image" class="h-72" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user