Usage
The CSlideover component behaves similarly to our dialog component, with the same props & emit events. Even using the same style slots for #title, #subtitle and #footer.
The CSlideover component should be used over dialogs for all forms, except simple destructive forms.
<script lang="ts" setup>
const openSlideover = ref(false)
</script>
<template>
<CButton @click="openSlideover = true">
Open slideover
</CButton>
<CSlideover v-model="openSlideover">
<template #title>
Example
</template>
<template #subtitle>
This is an example slideover subtitle
</template>
<CButton @click="openSlideover = false">
Close
</CButton>
</CSlideover>
</template>
Stacked slideovers
The slideover component supports stacking. Slideovers will need to be nested inside each other for this to work. See below for an example.
<script lang="ts" setup>
const openSlideover = ref(false)
const openSlideover2 = ref(false)
</script>
<template>
<CButton @click="openSlideover = true">
Open slideover
</CButton>
<CSlideover v-model="openSlideover">
<template #title>
Example 1
</template>
<template #subtitle>
This is an example slideover subtitle
</template>
<CButton @click="openSlideover2 = true">
Open slideover 2
</CButton>
<CButton @click="openSlideover = false">
Close slideover 1
</CButton>
<CSlideover v-model="openSlideover2">
<template #title>
Example 2
</template>
<template #subtitle>
This is an example slideover subtitle
</template>
<CButton @click="openSlideover2 = false">
Close slideover 2
</CButton>
</CSlideover>
</CSlideover>
</template>
Props
modelValuerequired
boolean
size
"md" | "lg" | "xl" | "2xl"
"md"initialFocus
PropType<HTMLElement>