Drawer

Ekran chetidan sirg'alib kiradigan panel. Formalar, tafsilot ko'rinishlari, sozlamalar va navigatsiya uchun ishlating.

Basic

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

Direction

Drawer istalgan tomondan sirg'alib kirishi mumkin: right (sukut), left, top yoki 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

Beshta o'lcham mavjud: sm, md (sukut), 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

Keng tarqalgan qolip: drawer ichidagi saqlash/bekor qilish amallari bilan forma.

<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

Tarkib sig'masa, body aylanadi, header va footer esa qotirilgan holda qoladi.

<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

Overlay bosilganda yoki Escape bosilganda drawer yopilish o'rniga silkinadi.

<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

Bir drawer ichidan boshqa drawer ochiladi. Har biri o'z overlay va z-indexiga ega bo'ladi.

<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	Ko'rsatish/yashirish (v-model)
title	string	''	Header sarlavhasi
description	string	''	Header tavsifi
direction	'left' | 'right' | 'top' | 'bottom'	'right'	Sirg'alish yo'nalishi
size	'sm' | 'md' | 'lg' | 'xl' | 'full'	'md'	Panel o'lchami
closable	boolean	true	Yopish tugmasini ko'rsatish
closeOnOverlay	boolean	true	Overlay bosilganda yopish
closeOnEsc	boolean	true	Escape bosilganda yopish
persistent	boolean	false	Yopishga urinilganda silkitish
hideOverlay	boolean	false	Backdroz yo'q
loading	boolean	false	Yuklanish overlayi
showFooter	boolean	true	Footer sohasini ko'rsatish
beforeClose	() => boolean | Promise<boolean>	—	Yopishdan oldingi himoya
destroyOnClose	boolean	false	Yopilganda tarkibni yo'q qilish
teleportTo	string	'body'	Teleport maqsadi

Events

Event	Description
update:modelValue	Qiymat o'zgardi
close	Drawer yopildi
opened	Ochilish animatsiyasi tugadi
closed	Yopilish animatsiyasi tugadi

Slots

Slot	Description
default	Body tarkibi
header	Maxsus header (title/description o'rnini bosadi)
footer	Maxsus footer tugmalari

Exposed

Method	Description
close()	Dasturiy ravishda yopish (beforeClose ni hurmat qiladi)