Skip to content

Commit ac0f182

Browse files
hunterliu1003hunterliu1003
committed
update example
1 parent c6bacc7 commit ac0f182

File tree

14 files changed

+45
-47
lines changed

14 files changed

+45
-47
lines changed

‎docs/content/en/examples/stepByStep.md

Lines changed: 13 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,17 @@ fullscreen: true
1616

1717
## Style the modal component step by step
1818

19-
**1. Hello, `vue-final-modal` !**
19+
**1. Hello, `vue-final-modal`**
2020

2121
<v-basic></v-basic>
2222

23-
<!-- <codepen path="basic/VBasic"></codepen> -->
24-
2523
<show-code>
2624

2725
```vue
2826
<template>
2927
<div>
3028
<vue-final-modal v-model="showModal">
31-
<span class="modal__title">Hello, vue-final-modal !</span>
29+
<span class="modal__title">Hello, vue-final-modal</span>
3230
</vue-final-modal>
3331
<button class="vfm-btn" @click="showModal = true">Open modal</button>
3432
</div>
@@ -56,15 +54,13 @@ export default {
5654

5755
<v-background></v-background>
5856

59-
<!-- <codepen path="basic/VBackground"></codepen> -->
60-
6157
<show-code>
6258

6359
```vue
6460
<template>
6561
<div>
6662
<vue-final-modal v-model="showModal" content-class="modal-content">
67-
<span class="modal__title">Hello, vue-final-modal !</span>
63+
<span class="modal__title">Hello, vue-final-modal</span>
6864
</vue-final-modal>
6965
<button class="vfm-btn" @click="showModal = true">Open modal</button>
7066
</div>
@@ -106,8 +102,6 @@ export default {
106102

107103
<v-centered></v-centered>
108104

109-
<!-- <codepen path="basic/VCentered"></codepen> -->
110-
111105
<show-code>
112106

113107
```vue
@@ -118,7 +112,7 @@ export default {
118112
classes="modal-container"
119113
content-class="modal-content"
120114
>
121-
<span class="modal__title">Hello, vue-final-modal !</span>
115+
<span class="modal__title">Hello, vue-final-modal</span>
122116
</vue-final-modal>
123117
<button class="vfm-btn" @click="showModal = true">Open modal</button>
124118
</div>
@@ -167,8 +161,6 @@ export default {
167161

168162
<v-content></v-content>
169163

170-
<!-- <codepen path="basic/VContent"></codepen> -->
171-
172164
<show-code>
173165

174166
```vue
@@ -179,7 +171,7 @@ export default {
179171
classes="modal-container"
180172
content-class="modal-content"
181173
>
182-
<span class="modal__title">Hello, vue-final-modal !</span>
174+
<span class="modal__title">Hello, vue-final-modal</span>
183175
<div class="modal__content">
184176
<p>
185177
Vue Final Modal is a renderless, stackable, detachable and lightweight
@@ -234,8 +226,6 @@ export default {
234226

235227
<v-close-button></v-close-button>
236228

237-
<!-- <codepen path="basic/VCloseButton"></codepen> -->
238-
239229
<show-code>
240230

241231
```vue
@@ -249,7 +239,7 @@ export default {
249239
<button class="modal__close" @click="showModal = false">
250240
<mdi-close></mdi-close>
251241
</button>
252-
<span class="modal__title">Hello, vue-final-modal !</span>
242+
<span class="modal__title">Hello, vue-final-modal</span>
253243
<div class="modal__content">
254244
<p>
255245
Vue Final Modal is a renderless, stackable, detachable and lightweight
@@ -311,8 +301,6 @@ export default {
311301

312302
<v-scrollable></v-scrollable>
313303

314-
<!-- <codepen path="basic/VScrollable"></codepen> -->
315-
316304
<show-code>
317305

318306
```vue
@@ -326,7 +314,7 @@ export default {
326314
<button class="modal__close" @click="showModal = false">
327315
<mdi-close></mdi-close>
328316
</button>
329-
<span class="modal__title">Hello, vue-final-modal !</span>
317+
<span class="modal__title">Hello, vue-final-modal</span>
330318
<div class="modal__content">
331319
<p v-for="i in 100" :key="i">
332320
Vue Final Modal is a renderless, stackable, detachable and lightweight
@@ -393,8 +381,6 @@ export default {
393381

394382
<v-action-buttons></v-action-buttons>
395383

396-
<!-- <codepen path="basic/VActionButtons"></codepen> -->
397-
398384
<show-code>
399385

400386
```vue
@@ -408,7 +394,7 @@ export default {
408394
<button class="modal__close" @click="showModal = false">
409395
<mdi-close></mdi-close>
410396
</button>
411-
<span class="modal__title">Hello, vue-final-modal !</span>
397+
<span class="modal__title">Hello, vue-final-modal</span>
412398
<div class="modal__content">
413399
<p v-for="i in 100" :key="i">
414400
Vue Final Modal is a renderless, stackable, detachable and lightweight
@@ -461,6 +447,8 @@ export default {
461447
.modal__action {
462448
display: flex;
463449
justify-content: center;
450+
align-items: center;
451+
flex-shrink: 0;
464452
padding: 1rem 0 0;
465453
}
466454
.modal__close {
@@ -484,8 +472,6 @@ export default {
484472

485473
<v-stackable></v-stackable>
486474

487-
<!-- <codepen path="basic/VStackable"></codepen> -->
488-
489475
<show-code>
490476

491477
```vue
@@ -496,10 +482,10 @@ export default {
496482
classes="modal-container"
497483
content-class="modal-content"
498484
>
499-
<button class="modal__close" @click="showModal = true">
485+
<button class="modal__close" @click="showModal = false">
500486
<mdi-close></mdi-close>
501487
</button>
502-
<span class="modal__title">Hello, vue-final-modal !</span>
488+
<span class="modal__title">Hello, vue-final-modal</span>
503489
<div class="modal__content">
504490
<p v-for="i in 100" :key="i">
505491
Vue Final Modal is a renderless, stackable, detachable and lightweight
@@ -585,6 +571,7 @@ export default {
585571
display: flex;
586572
justify-content: center;
587573
align-items: center;
574+
flex-shrink: 0;
588575
padding: 1rem 0 0;
589576
}
590577
.modal__close {

‎example/src/App.vue

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,22 @@
22
<div id="app" class="p-4">
33
<BasicOptions />
44

5-
<TailwindBasic />
6-
<TailwindLockScroll class="pt-4" />
7-
<TailwindHideOverlay class="pt-4" />
8-
<TailwindClickToClose class="pt-4" />
9-
<TailwindPreventClick class="pt-4" />
10-
<TailwindStackable class="pt-4" />
11-
<TailwindScrollable class="pt-4" />
12-
<TailwindAttach class="pt-4" />
5+
<p class="text-xl py-2">v-basic:</p>
6+
<v-basic></v-basic>
7+
<p class="text-xl py-2">v-background:</p>
8+
<v-background></v-background>
9+
<p class="text-xl py-2">v-centered:</p>
10+
<v-centered></v-centered>
11+
<p class="text-xl py-2">v-content:</p>
12+
<v-content></v-content>
13+
<p class="text-xl py-2">v-close:</p>
14+
<v-close-button></v-close-button>
15+
<p class="text-xl py-2">v-scrollable:</p>
16+
<v-scrollable></v-scrollable>
17+
<p class="text-xl py-2">v-action:</p>
18+
<v-action-buttons></v-action-buttons>
19+
<p class="text-xl py-2">v-stackable:</p>
20+
<v-stackable></v-stackable>
1321

1422
<div v-for="i in 100" :key="i">{{ i }}</div>
1523
</div>

‎example/src/components/basic/VActionButtons.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<button class="modal__close" @click="showModal = false">
99
<mdi-close></mdi-close>
1010
</button>
11-
<span class="modal__title">Hello, vue-final-modal !</span>
11+
<span class="modal__title">Hello, vue-final-modal</span>
1212
<div class="modal__content">
1313
<p v-for="i in 100" :key="i">
1414
Vue Final Modal is a renderless, stackable, detachable and lightweight
@@ -61,6 +61,8 @@ export default {
6161
.modal__action {
6262
display: flex;
6363
justify-content: center;
64+
align-items: center;
65+
flex-shrink: 0;
6466
padding: 1rem 0 0;
6567
}
6668
.modal__close {

‎example/src/components/basic/VBackground.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
33
<vue-final-modal v-model="showModal" content-class="modal-content">
4-
<span class="modal__title">Hello, vue-final-modal !</span>
4+
<span class="modal__title">Hello, vue-final-modal</span>
55
</vue-final-modal>
66
<button class="vfm-btn" @click="showModal = true">Open modal</button>
77
</div>

‎example/src/components/basic/VBasic.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
33
<vue-final-modal v-model="showModal">
4-
<span class="modal__title">Hello, vue-final-modal !</span>
4+
<span class="modal__title">Hello, vue-final-modal</span>
55
</vue-final-modal>
66
<button class="vfm-btn" @click="showModal = true">Open modal</button>
77
</div>

‎example/src/components/basic/VCentered.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
classes="modal-container"
66
content-class="modal-content"
77
>
8-
<span class="modal__title">Hello, vue-final-modal !</span>
8+
<span class="modal__title">Hello, vue-final-modal</span>
99
</vue-final-modal>
1010
<button class="vfm-btn" @click="showModal = true">Open modal</button>
1111
</div>

‎example/src/components/basic/VCloseButton.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<button class="modal__close" @click="showModal = false">
99
<mdi-close></mdi-close>
1010
</button>
11-
<span class="modal__title">Hello, vue-final-modal !</span>
11+
<span class="modal__title">Hello, vue-final-modal</span>
1212
<div class="modal__content">
1313
<p>
1414
Vue Final Modal is a renderless, stackable, detachable and lightweight

‎example/src/components/basic/VContent.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
classes="modal-container"
66
content-class="modal-content"
77
>
8-
<span class="modal__title">Hello, vue-final-modal !</span>
8+
<span class="modal__title">Hello, vue-final-modal</span>
99
<div class="modal__content">
1010
<p>
1111
Vue Final Modal is a renderless, stackable, detachable and lightweight

‎example/src/components/basic/VScrollable.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<button class="modal__close" @click="showModal = false">
99
<mdi-close></mdi-close>
1010
</button>
11-
<span class="modal__title">Hello, vue-final-modal !</span>
11+
<span class="modal__title">Hello, vue-final-modal</span>
1212
<div class="modal__content">
1313
<p v-for="i in 100" :key="i">
1414
Vue Final Modal is a renderless, stackable, detachable and lightweight

‎example/src/components/basic/VStackable.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
classes="modal-container"
66
content-class="modal-content"
77
>
8-
<button class="modal__close" @click="showModal = true">
8+
<button class="modal__close" @click="showModal = false">
99
<mdi-close></mdi-close>
1010
</button>
11-
<span class="modal__title">Hello, vue-final-modal !</span>
11+
<span class="modal__title">Hello, vue-final-modal</span>
1212
<div class="modal__content">
1313
<p v-for="i in 100" :key="i">
1414
Vue Final Modal is a renderless, stackable, detachable and lightweight
@@ -94,6 +94,7 @@ export default {
9494
display: flex;
9595
justify-content: center;
9696
align-items: center;
97+
flex-shrink: 0;
9798
padding: 1rem 0 0;
9899
}
99100
.modal__close {

0 commit comments

Comments
 (0)