DemoDialogScrollable.vue
2.1 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
<script lang="ts" setup>
const countryList = [
{ label: 'Bahamas, The', value: 'bahamas' },
{ label: 'Bahrain', value: 'bahrain' },
{ label: 'Bangladesh', value: 'bangladesh' },
{ label: 'Barbados', value: 'barbados' },
{ label: 'Belarus', value: 'belarus' },
{ label: 'Belgium', value: 'belgium' },
{ label: 'Belize', value: 'belize' },
{ label: 'Benin', value: 'benin' },
{ label: 'Bhutan', value: 'bhutan' },
{ label: 'Bolivia', value: 'bolivia' },
{ label: 'Bosnia and Herzegovina', value: 'bosnia' },
{ label: 'Botswana', value: 'botswana' },
{ label: 'Brazil', value: 'brazil' },
{ label: 'Brunei', value: 'brunei' },
{ label: 'Bulgaria', value: 'bulgaria' },
{ label: 'Burkina Faso', value: 'burkina' },
]
const selectedCountry = ref('')
const isDialogVisible = ref(false)
</script>
<template>
<VDialog
v-model="isDialogVisible"
scrollable
max-width="350"
>
<!-- Dialog Activator -->
<template #activator="{ props }">
<VBtn v-bind="props">
Open Dialog
</VBtn>
</template>
<!-- Dialog Content -->
<VCard>
<DialogCloseBtn
variant="text"
size="default"
@click="isDialogVisible = false"
/>
<VCardItem class="pb-3">
<VCardTitle>Select Country</VCardTitle>
</VCardItem>
<VDivider />
<VCardText style="block-size: 300px;">
<VRadioGroup
v-model="selectedCountry"
:inline="false"
>
<VRadio
v-for="country in countryList"
:key="country.label"
:label="country.label"
:value="country.value"
color="primary"
/>
</VRadioGroup>
</VCardText>
<VDivider />
<VCardText class="pt-5 text-end overflow-visible">
<VSpacer />
<VBtn
variant="outlined"
color="secondary"
class="me-4"
@click="isDialogVisible = false"
>
Close
</VBtn>
<VBtn @click="isDialogVisible = false">
Save Changes
</VBtn>
</VCardText>
</VCard>
</VDialog>
</template>