Skip to content

Commit 62e9d82

Browse files
GlobalHiveGlobalHive
committed
docs: Added interactive examples
1 parent ffbe9d9 commit 62e9d82

10 files changed

Lines changed: 244 additions & 72 deletions

‎docs/guide/button-labels.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,32 @@ To customize the labels of the buttons, you can use the `buttonLabels` prop in t
1717
</template>
1818
```
1919

20+
<style>
21+
.custom-block.example {
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
26+
padding: 1rem;
27+
height: 16rem;
28+
background-color: var(--vp-c-bg-alt);
29+
text-align: center;
30+
}
31+
</style>
32+
33+
<script setup>
34+
import VTour from '../../src/components/VTour.vue';
35+
import "../../src/style/style.scss";
36+
37+
const steps = [{ target: '[data-step="0"]', content: 'Customized button labels' }];
38+
</script>
39+
40+
<VTour :steps="steps" autoStart saveToLocalStorage='never' noScroll :buttonLabels='{next: "➡", back: "⬅", done: "✓", skip: "↪"}' />
41+
42+
<div class="custom-block example">
43+
<p data-step="0">Target</p>
44+
</div>
45+
2046
## Customizing the action buttons
2147
You can also customize the action button labels by using the `actions` slot.
2248

‎docs/guide/hiding-the-arrow.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,33 @@ To hide the arrow, you can use the `hideArrow` prop in the `VTour` component.
1515
</template>
1616
```
1717

18+
<style>
19+
.custom-block.example {
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
24+
padding: 1rem;
25+
height: 16rem;
26+
background-color: var(--vp-c-bg-alt);
27+
text-align: center;
28+
}
29+
</style>
30+
31+
<script setup>
32+
import { ref } from 'vue';
33+
import VTour from '../../src/components/VTour.vue';
34+
import "../../src/style/style.scss";
35+
36+
const steps = [{ target: '[data-step="0"]', content: 'Tooltip arrow hidden' }];
37+
</script>
38+
39+
<VTour :steps="steps" autoStart hideArrow saveToLocalStorage='never' noScroll />
40+
41+
<div class="custom-block example">
42+
<p data-step="0" @click="clickToStart">Target</p>
43+
</div>
44+
1845
::: info
1946
By default, the arrow is displayed.
2047
:::

‎docs/guide/highlight-target.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,30 @@ To enable the highlight effect, you can use the `highlight` prop in the `VTour`
1616
...
1717
</template>
1818
```
19+
<style>
20+
.custom-block.example {
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
25+
padding: 1rem;
26+
height: 16rem;
27+
background-color: var(--vp-c-bg-alt);
28+
text-align: center;
29+
}
30+
</style>
31+
<script setup>
32+
import VTour from '../../src/components/VTour.vue';
33+
import "../../src/style/style.scss";
34+
35+
const steps = [{ target: '[data-step="0"]', content: 'Target highlighted' }];
36+
37+
</script>
38+
<VTour :steps="steps" autoStart saveToLocalStorage='never' noScroll highlight/>
39+
40+
<div class="custom-block example">
41+
<p data-step="0">Target</p>
42+
</div>
1943

2044
::: info
2145
By default, highlighting is disabled.

‎docs/guide/multiple-tours.md‎

Lines changed: 1 addition & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,8 @@
11
# Multiple Tours
22
There are two ways to create multiple tours on the same page. You can either create multiple `VTour` components or create a single `VTour` component with multiple steps.
33

4-
::: warning
5-
This is an advanced feature and requires a good understanding of the `vuejs-tour` package.
6-
:::
7-
84
## Single Component
95
To create multiple tours using a single `VTour` component, you can use the `steps` and `name` prop to switch between different tours.
10-
<div class="tip custom-block" style="padding-top: 8px">
11-
This is the recommended method for creating multiple tours on the same page.
12-
</div>
136

147
### Defining the tours
158
First you need to define the steps for each tour.
@@ -64,68 +57,4 @@ To switch between tours, you just switch the `tourSteps` and `tourName` values.
6457
...
6558
</template>
6659
```
67-
Now everytime you call the `switchTour` function, the tour will switch between `tour1` and `tour2`.
68-
::: tip
69-
There's no need to call `stopTour` before switching tours, the single `VTour` component will handle that for you.
70-
:::
71-
72-
## Multiple Components
73-
You can create multiple `VTour` components with different steps and options.
74-
75-
### Defining the tours
76-
First you need to define the steps for each tour.
77-
```vue{3-6,11-12}
78-
<script setup lang='ts'>
79-
...
80-
const steps = [...];
81-
const steps2 = [...];
82-
const vTour = ref();
83-
const vTour2 = ref();
84-
vTour.value.startTour();
85-
</script>
86-
87-
<template>
88-
<VTour :steps="steps" ref="vTour" name="FirstTour"/>
89-
<VTour :steps="steps2" ref="vTour2" name="SecondTour"/>
90-
...
91-
</template>
92-
```
93-
In this case we are creating two tours `vTour` and `vTour2`.
94-
Each with their corresponding steps `steps` and `steps2`.
95-
96-
### Switching between tours
97-
To switch between tours, you just call the `startTour` method on the corresponding `VTour` component.
98-
```vue{9-17}
99-
<script setup lang='ts'>
100-
...
101-
const steps = [...];
102-
const steps2 = [...];
103-
const vTour = ref();
104-
const vTour2 = ref();
105-
vTour.value.startTour();
106-
107-
function switchTour() {
108-
if (vTour.value.isActive) {
109-
vTour.value.stopTour();
110-
vTour2.value.startTour();
111-
} else {
112-
vTour2.value.stopTour();
113-
vTour.value.startTour();
114-
}
115-
}
116-
</script>
117-
118-
<template>
119-
<VTour :steps="steps" ref="vTour" name="FirstTour"/>
120-
<VTour :steps="steps2" ref="vTour2" name="SecondTour"/>
121-
...
122-
</template>
123-
```
124-
Now everytime you call the `switchTour` function, the tour will switch between `tour1` and `tour2`.
125-
126-
::: warning
127-
When using multiple `VTour` components, it is possible to have multiple tours active at the same time.
128-
Which may cause unexpected behavior and overlapping tours.
129-
130-
This is why the single component method is recommended.
131-
:::
60+
Now everytime you call the `switchTour` function, the tour will switch between `tour1` and `tour2`.

‎docs/guide/roadmap.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
* **VTour:** Adding `onBeforeStep` event
1111
* **VTour:** Adding `onAfterStep` event
1212
* **VTour:** Adding `showProgress` prop
13+
* **VTour:** Adding `noScroll` prop ✔️
1314
* **Step:** Adding `arrow️` option
1415
* **Step:** Adding `backdrop` option
1516
* **Step:** Adding `highligt` option
@@ -19,6 +20,7 @@
1920
### Documentation
2021

2122
* **Documentation:** Adding referece pages 🚧
23+
* **Documentation:** Adding interactive examples ✔️
2224

2325
### Bug Fixes
2426

‎docs/guide/skipping-a-tour.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,32 @@ To hide the Skip button, you can use the `hideSkip` prop in the `VTour` componen
1919
</template>
2020
```
2121

22+
<style>
23+
.custom-block.example {
24+
display: flex;
25+
justify-content: center;
26+
align-items: center;
27+
28+
padding: 1rem;
29+
height: 16rem;
30+
background-color: var(--vp-c-bg-alt);
31+
text-align: center;
32+
}
33+
</style>
34+
35+
<script setup>
36+
import VTour from '../../src/components/VTour.vue';
37+
import "../../src/style/style.scss";
38+
39+
const steps = [{ target: '[data-step="0"]', content: 'No skipping for you' }];
40+
</script>
41+
42+
<VTour :steps="steps" autoStart hideSkip saveToLocalStorage='never' noScroll />
43+
44+
<div class="custom-block example">
45+
<p data-step="0">Target</p>
46+
</div>
47+
2248
## Customizing the action buttons
2349
You can also customize the action buttons by using the `actions` slot.
2450

‎docs/guide/start-options.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,48 @@ To start a tour, you can use the `autoStart` prop or call the `startTour` method
1515
```
1616
When using the `autoStart` prop, the tour will start automatically when the component is mounted.
1717

18+
<script setup>
19+
import { ref } from 'vue';
20+
import VTour from '../../src/components/VTour.vue';
21+
import "../../src/style/style.scss";
22+
23+
const vTourRef = ref();
24+
const autoStart = [{ target: '[data-step="0"]', content: 'Tour started automatically' }];
25+
const manualStart = [{ target: '[data-step="1"]', content: 'Tour started' }];
26+
const delayStart = [{ target: '[data-step="2"]', content: 'Tour started after 2 seconds' }];
27+
const currentSteps = ref(autoStart);
28+
const delay = ref(0);
29+
30+
function clickToStart() {
31+
currentSteps.value = manualStart;
32+
vTourRef.value.startTour();
33+
delay.value = 2000;
34+
}
35+
36+
function clickToStartDelay() {
37+
currentSteps.value = delayStart;
38+
vTourRef.value.startTour();
39+
}
40+
</script>
41+
42+
<style>
43+
.custom-block.example {
44+
display: flex;
45+
justify-content: center;
46+
align-items: center;
47+
48+
padding: 1rem;
49+
height: 16rem;
50+
background-color: var(--vp-c-bg-alt);
51+
text-align: center;
52+
}
53+
</style>
54+
55+
<VTour ref="vTourRef" :steps="currentSteps" autoStart saveToLocalStorage='never' noScroll :startDelay="delay"/>
56+
57+
<div class="custom-block example">
58+
<p data-step="0">Target</p>
59+
</div>
1860

1961
## Using the `startTour` method
2062
```vue
@@ -32,6 +74,11 @@ When using the `autoStart` prop, the tour will start automatically when the comp
3274
</template>
3375
```
3476
When using the `startTour` method, the tour will start when the method is called. This can be useful when you want to start the tour based on user interaction.
77+
78+
<div class="custom-block example">
79+
<button type="button" data-step="1" @click="clickToStart">Click To Start</button>
80+
</div>
81+
3582
::: tip
3683
Every time you use `startTour`, the tour begins from the start. It will do this until finished, unless you change [`saveToLocalStorage`](./saving-progress) to `step`, which saves progress.
3784
:::
@@ -48,6 +95,10 @@ The `startDelay` prop allows you to delay the start of the tour. This can be use
4895
</template>
4996
```
5097

98+
<div class="custom-block example">
99+
<button type="button" data-step="2" @click="clickToStartDelay">Click To Start<br>With 2 Seconds Delay</button>
100+
</div>
101+
51102
::: tip
52103
The `startDelay` prop is in milliseconds.
53104
:::

‎docs/guide/step-options.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,35 @@ If not provided, the `placement` property will default to `right-middle`.
115115
</script>
116116
```
117117

118+
<style>
119+
.custom-block.example {
120+
display: flex;
121+
justify-content: center;
122+
align-items: center;
123+
124+
padding: 1rem;
125+
height: 16rem;
126+
background-color: var(--vp-c-bg-alt);
127+
text-align: center;
128+
}
129+
</style>
130+
131+
<script setup>
132+
import VTour from '../../src/components/VTour.vue';
133+
import "../../src/style/style.scss";
134+
135+
const steps = [{ target: '[data-step="0"]', content: 'Placement: top', placement: 'top' }
136+
,{ target: '[data-step="0"]', content: 'Placement: right (default)'}
137+
,{ target: '[data-step="0"]', content: 'Placement: bottom', placement: 'bottom' }
138+
,{ target: '[data-step="0"]', content: 'Placement: left', placement: 'left' }];
139+
</script>
140+
141+
<VTour :steps="steps" autoStart saveToLocalStorage='never' noScroll />
142+
143+
<div class="custom-block example">
144+
<p data-step="0">Target</p>
145+
</div>
146+
118147
::: info
119148
`vuejs-tour` will automatically adjust the placement of the step if there is not enough space.
120149
:::

‎docs/guide/tour-margin.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,32 @@ You can set the margin of the tour by using the `margin` prop in the `VTour` com
1515
</template>
1616
```
1717

18+
<style>
19+
.custom-block.example {
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
24+
padding: 1rem;
25+
height: 16rem;
26+
background-color: var(--vp-c-bg-alt);
27+
text-align: center;
28+
}
29+
</style>
30+
31+
<script setup>
32+
import VTour from '../../src/components/VTour.vue';
33+
import "../../src/style/style.scss";
34+
35+
const steps = [{ target: '[data-step="0"]', content: 'Margin of 64' }];
36+
</script>
37+
38+
<VTour :steps="steps" autoStart :margin="64" saveToLocalStorage='never' noScroll />
39+
40+
<div class="custom-block example">
41+
<p data-step="0">Target</p>
42+
</div>
43+
1844
::: info
1945
The default value of the `margin` prop is `8`. If the [`highlight`](./highlight-target.md) prop is set, `14` is used as the default value.
2046
:::

0 commit comments

Comments
 (0)