Drawer

Панель, выезжающая с края экрана. Используется для форм, подробных просмотров, настроек и навигации.

Basic

<template>
  <VxDrawer v-model="show" title="Drawer" description="A basic drawer.">
    <p>Content goes here.</p>
  </VxDrawer>
</template>

Direction

Drawer может выезжать с любого края: right (по умолчанию), left, top или bottom.

<template>
  <VxDrawer v-model="show" title="Right" direction="right" />
  <VxDrawer v-model="show" title="Left" direction="left" />
  <VxDrawer v-model="show" title="Top" direction="top" />
  <VxDrawer v-model="show" title="Bottom" direction="bottom" />
</template>

Sizes

Доступно пять размеров: sm, md (по умолчанию), lg, xl, full.

<template>
  <VxDrawer size="sm" title="Small" />
  <VxDrawer size="md" title="Medium" />
  <VxDrawer size="lg" title="Large" />
  <VxDrawer size="xl" title="XL" />
  <VxDrawer size="full" title="Full" />
</template>

Form Drawer

Частый паттерн: форма внутри drawer с действиями сохранения и отмены.

<template>
  <VxDrawer v-model="show" title="Edit Profile">
    <form>
      <input v-model="form.name" placeholder="Name" />
      <input v-model="form.email" placeholder="Email" />
    </form>
    <template #footer>
      <button @click="show = false">Cancel</button>
      <button @click="save">Save</button>
    </template>
  </VxDrawer>
</template>

Scrollable Content

Когда содержимое не помещается, тело прокручивается, а header и footer остаются на месте.

<template>
  <VxDrawer v-model="show" title="Terms of Service">
    <div>Long scrollable content...</div>
    <template #footer>
      <button @click="show = false">Decline</button>
      <button @click="accept">Accept</button>
    </template>
  </VxDrawer>
</template>

Custom Header

<template>
  <VxDrawer v-model="show">
    <template #header>
      <div class="custom-header">
        <MyIcon />
        <div>
          <h3>Task Completed</h3>
          <p>Review the details below</p>
        </div>
      </div>
    </template>
    <p>Content...</p>
  </VxDrawer>
</template>

No Footer

<template>
  <VxDrawer v-model="show" title="Notifications" :show-footer="false">
    <NotificationList />
  </VxDrawer>
</template>

Persistent

Drawer встряхивается вместо закрытия при клике на оверлей или нажатии Escape.

<template>
  <VxDrawer v-model="show" persistent title="Unsaved" />
</template>

No Overlay

<template>
  <VxDrawer v-model="show" hide-overlay title="Side Panel" />
</template>

Loading

<template>
  <VxDrawer v-model="show" :loading="isLoading" title="Loading" />
</template>

Nested Drawers

Открывайте один drawer внутри другого. У каждого свой оверлей и z-index.

<template>
  <VxDrawer v-model="outer" title="Settings" size="lg">
    <SettingsList @open-detail="inner = true" />
  </VxDrawer>
  <VxDrawer v-model="inner" title="Detail" size="sm">
    <DetailContent />
  </VxDrawer>
</template>

Props

Prop	Type	Default	Description
modelValue	boolean	false	Показать/скрыть (v-model)
title	string	''	Заголовок header
description	string	''	Описание в header
direction	'left' | 'right' | 'top' | 'bottom'	'right'	Направление выезда
size	'sm' | 'md' | 'lg' | 'xl' | 'full'	'md'	Размер панели
closable	boolean	true	Показывать кнопку закрытия
closeOnOverlay	boolean	true	Закрывать по клику на оверлей
closeOnEsc	boolean	true	Закрывать по Escape
persistent	boolean	false	Встряхивать при попытке закрыть
hideOverlay	boolean	false	Без подложки
loading	boolean	false	Оверлей загрузки
showFooter	boolean	true	Показывать footer
beforeClose	() => boolean | Promise<boolean>	—	Guard перед закрытием
destroyOnClose	boolean	false	Уничтожать содержимое при закрытии
teleportTo	string	'body'	Цель teleport

Events

Event	Description
update:modelValue	Значение изменилось
close	Drawer закрыт
opened	Анимация открытия завершена
closed	Анимация закрытия завершена

Slots

Slot	Description
default	Содержимое тела
header	Пользовательский header (заменяет title/description)
footer	Пользовательские кнопки footer

Exposed

Method	Description
close()	Программное закрытие (с учётом beforeClose)