dialog.vue
2.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<script setup>
import * as demoCode from '@/views/demos/components/dialog/demoCodeDialog'
</script>
<template>
<VRow>
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
>
<p>A dialog contains two slots, one for its activator and one for its content (default). Good for Privacy Policies.</p>
<DemoDialogBasic />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Persistent -->
<AppCardCode
title="Persistent"
:code="demoCode.persistent"
>
<p>Use <code>persistent</code> prop to create persistent dialog.</p>
<DemoDialogPersistent />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Scrollable -->
<AppCardCode
title="Scrollable"
:code="demoCode.scrollable"
>
<p>Use <code>scrollable</code> prop to create scrollable dialog.</p>
<DemoDialogScrollable />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Loader -->
<AppCardCode
title="Loader"
:code="demoCode.loader"
>
<p>The <code>v-dialog</code> component makes it easy to create a customized loading experience for your application.</p>
<DemoDialogLoader />
</AppCardCode>
</VCol>
<VCol
col="12"
md="6"
>
<!-- 👉 Nesting -->
<AppCardCode
title="Nesting"
:code="demoCode.nesting"
>
<p>Dialogs can be nested: you can open one dialog from another.</p>
<DemoDialogNesting />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Overflowed -->
<AppCardCode
title="Overflowed"
:code="demoCode.overflowed"
>
<p>Modals that do not fit within the available window space will scroll the container.</p>
<DemoDialogOverflowed />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Fullscreen -->
<AppCardCode
title="Fullscreen"
:code="demoCode.fullscreen"
>
<p>Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens.</p>
<DemoDialogFullscreen />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Form -->
<AppCardCode
title="Form"
:code="demoCode.form"
>
<p>Just a simple example of a form in a dialog.</p>
<DemoDialogForm />
</AppCardCode>
</VCol>
</VRow>
</template>