127 lines
3.0 KiB
Vue
127 lines
3.0 KiB
Vue
<script setup>
|
|
const isDialogVisible = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog
|
|
v-model="isDialogVisible"
|
|
fullscreen
|
|
:scrim="false"
|
|
transition="dialog-bottom-transition"
|
|
>
|
|
<!-- Dialog Activator -->
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Open Dialog
|
|
</VBtn>
|
|
</template>
|
|
|
|
<!-- Dialog Content -->
|
|
<VCard>
|
|
<!-- Toolbar -->
|
|
<div>
|
|
<VToolbar color="primary">
|
|
<VBtn
|
|
icon
|
|
variant="plain"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
<VIcon
|
|
color="white"
|
|
icon="ri-close-line"
|
|
/>
|
|
</VBtn>
|
|
|
|
<VToolbarTitle>Settings</VToolbarTitle>
|
|
|
|
<VSpacer />
|
|
|
|
<VToolbarItems>
|
|
<VBtn
|
|
variant="text"
|
|
@click="isDialogVisible = false"
|
|
>
|
|
Save
|
|
</VBtn>
|
|
</VToolbarItems>
|
|
</VToolbar>
|
|
</div>
|
|
|
|
<!-- List -->
|
|
<VList lines="two">
|
|
<VListSubheader>User Controls</VListSubheader>
|
|
<VListItem
|
|
title="Content filtering"
|
|
subtitle="Set the content filtering level to restrict apps that can be downloaded"
|
|
/>
|
|
<VListItem
|
|
title="Password"
|
|
subtitle="Require password for purchase or use password to restrict purchase"
|
|
/>
|
|
</VList>
|
|
|
|
<VDivider />
|
|
|
|
<!-- List -->
|
|
<VList
|
|
lines="two"
|
|
select-strategy="classic"
|
|
>
|
|
<VListSubheader>General</VListSubheader>
|
|
|
|
<VListItem
|
|
title="Notifications"
|
|
subtitle="Notify me about updates to apps or games that I downloaded"
|
|
value="Notifications"
|
|
>
|
|
<template #prepend="{ isActive }">
|
|
<VListItemAction start>
|
|
<VCheckbox
|
|
:model-value="isActive"
|
|
color="primary"
|
|
/>
|
|
</VListItemAction>
|
|
</template>
|
|
</VListItem>
|
|
|
|
<VListItem
|
|
title="Sound"
|
|
subtitle="Auto-update apps at any time. Data charges may apply"
|
|
value="Sound"
|
|
>
|
|
<template #prepend="{ isActive }">
|
|
<VListItemAction start>
|
|
<VCheckbox
|
|
:model-value="isActive"
|
|
color="primary"
|
|
/>
|
|
</VListItemAction>
|
|
</template>
|
|
</VListItem>
|
|
|
|
<VListItem
|
|
title="Auto-add widgets"
|
|
subtitle="Automatically add home screen widgets"
|
|
value="Auto-add widgets"
|
|
>
|
|
<template #prepend="{ isActive }">
|
|
<VListItemAction start>
|
|
<VCheckbox
|
|
:model-value="isActive"
|
|
color="primary"
|
|
/>
|
|
</VListItemAction>
|
|
</template>
|
|
</VListItem>
|
|
</VList>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.dialog-bottom-transition-enter-active,
|
|
.dialog-bottom-transition-leave-active {
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
</style>
|