Overlay

CSSlideover

Боковая выдвижная панель для дополнительного содержимого и действий.

Предпросмотр

Интерактивный компонент

Использование

Vue · публичный API CS UI Kit

<script setup lang="ts">
import { ref } from 'vue'
import { CSButton } from '@cassoft-support/cs-platform-ui-kit/button'
import { CSSlideover } from '@cassoft-support/cs-platform-ui-kit/slideover'

const open = ref(false)
</script>

<template>
  <CSButton label="Открыть панель" @click="open = true" />
  <CSSlideover v-model:open="open" title="Параметры компонента">
    <template #body>
      Настройте содержимое боковой панели через слоты.
    </template>
    <template #footer>
      <CSButton label="Закрыть" color="neutral" variant="outline" @click="open = false" />
    </template>
  </CSSlideover>
</template>

Пример использует компонент библиотеки. Подключите Nuxt-модуль `@cassoft-support/cs-platform-ui-kit/nuxt` или импортируйте компонент из публичного package entry.