Usage
The CDialog component is a modal component used primarily for destructive or non-form based actions.
<script lang="ts" setup>
const openDialog = ref(false)
</script>
<template>
<CButton @click="openDialog = true">
Open dialog
</CButton>
<CDialog v-model="openDialog">
<template #title>
Example
</template>
<template #subtitle>
This is an example dialog subtitle
</template>
Body content here
<template #footer>
<CButton @click="openDialog = false">
Close
</CButton>
</template>
</CDialog>
</template>
Sizes
The default size prop for the component is md. This sets the max width of the component from the sm breakpoint to max-w-lg. The sm option is max-w-md, while both the lg and xl options are max-w-xl, with xl having an extra breakpoint added for larger screens: md:max-w-2xl.
<script lang="ts" setup>
const openDialog = ref(false)
</script>
<template>
<CButton
@click="openDialog = true"
>
Open XL dialog
</CButton>
<CDialog
v-model="openDialog"
size="xl"
>
<template #title>
Example xl dialog
</template>
<template #subtitle>
This is an example dialog subtitle
</template>
Body content here
<template #footer>
<CButton @click="openDialog = false">
Close
</CButton>
</template>
</CDialog>
</template>
Props
modelValuerequired
boolean
size
"md" | "sm" | "lg" | "xl"
"md"initialFocus
PropType<HTMLElement>