Slideover

Display a Slideover.

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)
const selectItems = [
  { name: 'Example 1', value: 1, disabled: false },
  { name: 'Example 2', value: 2, disabled: true },
  { name: 'Example 3', value: 3, disabled: false },
]

const selectedVal = ref<number>()
</script>

<template>
  <CButton @click="openSlideover = true">
    Open slideover
  </CButton>
  <CSlideover
    v-if="openSlideover"
    :model-value="openSlideover"
    @close="openSlideover = false"
  >
    <CSlideoverContent>
      <template #title>
        Example
      </template>
      <template #subtitle>
        This is an example slideover subtitle
      </template>
      <CSelect
        id="test"
        v-model="selectedVal"
        :options="selectItems"
        placeholder="Example select"
        by="value"
        display-value="name"
        label="Example select"
        class="min-w-50 w-auto"
      />
      <CSelect
        id="test2"
        v-model="selectedVal"
        :options="selectItems"
        placeholder="Example select"
        by="value"
        label="Example select"
        class="min-w-50 w-auto"
      >
        <template #selected="{ selected }">
          {{ selected?.name }}
        </template>
        <template #default="{ items, selected }">
          <CSelectItem
            v-for="item in items"
            :key="item.name"
            :selected="item.value === selected?.value"
            :value="item.value"
            :disabled="item.disabled"
          >
            {{ item.name }}
          </CSelectItem>
        </template>
      </CSelect>

      <template #footer>
        <CButton @click="openSlideover = false">
          Close
        </CButton>
      </template>
    </CSlideoverContent>
  </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)
const selectItems = [
  { name: 'Example 1', value: 1, disabled: false },
  { name: 'Example 2', value: 2, disabled: true },
  { name: 'Example 3', value: 3, disabled: false },
]

const selectedVal = ref<number>()
</script>

<template>
  <CButton @click="openSlideover = true">
    Open slideover
  </CButton>
  <CSlideover
    v-if="openSlideover"
    :model-value="openSlideover"
    @close="openSlideover = false"
  >
    <CSlideoverContent>
      <template #title>
        Example 1
      </template>
      <template #subtitle>
        This is an example slideover subtitle
      </template>
      <CSelect
        id="test"
        v-model="selectedVal"
        :options="selectItems"
        placeholder="Example select"
        by="value"
        display-value="name"
        label="Example select"
        class="min-w-50 w-auto"
      />
      <template #footer>
        <CButton
          variant="outlined"
          @click="openSlideover = false"
        >
          Close slideover 1
        </CButton>
        <CButton @click="openSlideover2 = true">
          Open slideover 2
        </CButton>
      </template>
    </CSlideoverContent>
    <CSlideover v-model="openSlideover2">
      <CSlideoverContent>
        <template #title>
          Example 2
        </template>
        <template #subtitle>
          This is an example slideover subtitle
        </template>
        <template #footer>
          <CButton
            variant="outlined"
            @click="openSlideover2 = false"
          >
            Close slideover 2
          </CButton>
        </template>
      </CSlideoverContent>
    </CSlideover>
  </CSlideover>
</template>

Props

modelValuerequired

boolean

size

"md" | "lg" | "xl" | "2xl"

"md"

portal

string | RendererElement

"body"

initialFocus

PropType<HTMLElement>