File tree Expand file tree Collapse file tree 2 files changed +40
-5
lines changed
example/src/components/tailwind Expand file tree Collapse file tree 2 files changed +40
-5
lines changed Original file line number Diff line number Diff line change @@ -12,6 +12,39 @@ See [Tailwind Examples Source Code](https://github.com/hunterliu1003/vue-final-m
12
12
13
13
<tailwind-simple ></tailwind-simple >
14
14
15
+ <show-code >
16
+
17
+ ``` vue
18
+ <template>
19
+ <div>
20
+ <vue-final-modal
21
+ v-model="showModal"
22
+ classes="flex justify-center items-center"
23
+ content-class="max-h-1/2 p-4 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded overflow-auto"
24
+ >
25
+ <span class="text-2xl mb-2">Hello, world!</span>
26
+ </vue-final-modal>
27
+ <button @click="showModal = true">Simple</button>
28
+ </div>
29
+ </template>
30
+
31
+ <script>
32
+ export default {
33
+ data: () => ({
34
+ showModal: false
35
+ })
36
+ }
37
+ </script>
38
+
39
+ <style scoped>
40
+ button {
41
+ @apply mb-2 px-2 py-1 border rounded;
42
+ }
43
+ </style>
44
+ ```
45
+
46
+ </show-code >
47
+
15
48
## Set lockScroll to ` false `
16
49
17
50
<tailwind-lock-scroll ></tailwind-lock-scroll >
@@ -40,14 +73,10 @@ See [Tailwind Examples Source Code](https://github.com/hunterliu1003/vue-final-m
40
73
41
74
<tailwind-attach ></tailwind-attach >
42
75
43
-
44
76
## Custom vue-final-modal component
45
77
46
-
47
78
TBD
48
79
49
-
50
80
## Override style
51
81
52
-
53
82
TBD
Original file line number Diff line number Diff line change 7
7
>
8
8
<span class =" text-2xl mb-2" >Hello, world!</span >
9
9
</vue-final-modal >
10
- <base- button @click =" showModal = true" >Simple</base- button >
10
+ <button @click =" showModal = true" >Simple</button >
11
11
</div >
12
12
</template >
13
13
@@ -18,3 +18,9 @@ export default {
18
18
})
19
19
}
20
20
</script >
21
+
22
+ <style scoped>
23
+ button {
24
+ @apply mb- 2 px- 2 py- 1 border rounded ;
25
+ }
26
+ </style >
You can’t perform that action at this time.
0 commit comments