Dialog
Preview
Source code
html
<h-button kind="filled" content="Open dialog" @click="open = true" />
<h-dialog
v-model:open="open"
title="Reset settings?"
description="This will reset your app preferences back to their default settings. The following accounts will also be signed out:"
:dividers="state.dividers"
:actions="[{ label: 'Cancel', onClick: () => {} }, { label: 'Accept', onClick: () => {} }]"
>
<template #icon>
<Reset />
</template>
<template #content>
<div class="accounts">
<div>
<img src="../images/albedo.png" width="40" height="40"><span>albedo@aleikats.example</span>
</div>
<div>
<img src="../images/sucrose.png" width="40" height="40"><span>sucrose@aleikats.example</span>
</div>
<div>
<img src="../images/klee.png" width="40" height="40"><span>klee@aleikats.example</span>
</div>
</div>
</template>
</h-dialog><h-button kind="filled" content="Open dialog" @click="open = true" />
<h-dialog
v-model:open="open"
title="Reset settings?"
description="This will reset your app preferences back to their default settings. The following accounts will also be signed out:"
:dividers="state.dividers"
:actions="[{ label: 'Cancel', onClick: () => {} }, { label: 'Accept', onClick: () => {} }]"
>
<template #icon>
<Reset />
</template>
<template #content>
<div class="accounts">
<div>
<img src="../images/albedo.png" width="40" height="40"><span>albedo@aleikats.example</span>
</div>
<div>
<img src="../images/sucrose.png" width="40" height="40"><span>sucrose@aleikats.example</span>
</div>
<div>
<img src="../images/klee.png" width="40" height="40"><span>klee@aleikats.example</span>
</div>
</div>
</template>
</h-dialog>Dialogs provide important prompts in a user flow. See the Material 3 documentation for this component.
Props
ts
defineProps<{
// The title of the dialog.
title: string,
// The description to show. Optional, but if your dialog has text in the
// content, it can help with accessibility to have this set.
description?: string,
// Whether to show dividers between the description, content, and actions.
dividers?: boolean
// Actions that can be taken on this dialog. You should probably only have one or two.
actions?: {
// The text to be shown for this action.
label: string,
// The function to call when this action is taken, to be run before the
// dialog closes. If it returns a promise, the promise is `await`ed before
// closing the dialog.
onClick: () => (any | Promise<any>)
}[]
// Whether or not the modal is open. You can use `v-model:open` to bind this.
open?: boolean;
}>()defineProps<{
// The title of the dialog.
title: string,
// The description to show. Optional, but if your dialog has text in the
// content, it can help with accessibility to have this set.
description?: string,
// Whether to show dividers between the description, content, and actions.
dividers?: boolean
// Actions that can be taken on this dialog. You should probably only have one or two.
actions?: {
// The text to be shown for this action.
label: string,
// The function to call when this action is taken, to be run before the
// dialog closes. If it returns a promise, the promise is `await`ed before
// closing the dialog.
onClick: () => (any | Promise<any>)
}[]
// Whether or not the modal is open. You can use `v-model:open` to bind this.
open?: boolean;
}>()Slots
content
The content slot is used for the body of the dialog, displayed below the description.
icon
The icon slot is used for the icon that displays at the top of the dialog.