درج Drawer

طبقة منبثقة تنزلق من حافة الشاشة، مناسبة للعمليات الثانوية كالتفاصيل والتصفية. أربعة اتجاهات، وحجم وسلوك قناع قابلان للتحكم.

درج

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton type="primary" @click="open('right')">right الجانب الأيمن</LhButton>
      <LhButton @click="open('left')">left الجانب الأيسر</LhButton>
      <LhButton @click="open('top')">top الأعلى</LhButton>
      <LhButton @click="open('bottom')">bottom الأسفل</LhButton>
      <LhButton @click="openNoMask">عدم الإغلاق من القناع</LhButton>
    </div>
    <LhDrawer v-model="visible" :title="title" :direction="direction" :size="size">
      <p style="margin: 0 0 8px">يتحكم direction في الاتجاه، وsize في الحجم (رقم بالبكسل أو سلسلة بنسبة مئوية).</p>
      <p class="demo-note">يمكن للأزرار السفلية تشغيل تركيبات lockScroll / closeOnEsc وغيرها.</p>
      <template #footer>
        <LhButton @click="visible = false">إلغاء</LhButton>
        <LhButton type="primary" @click="visible = false">حفظ</LhButton>
      </template>
    </LhDrawer>
    <LhDrawer
      v-model="noMask"
      title="عدم الإغلاق عند النقر على القناع"
      direction="right"
      size="30%"
      :mask-closable="false"
      :show-close="true"
      :lock-scroll="true"
      :close-on-esc="false"
    >
      <p style="margin: 0">maskClosable=false وcloseOnEsc=false، لا يبقى للإغلاق إلا الأزرار أو أيقونة الإغلاق.</p>
      <template #footer>
        <LhButton type="primary" @click="noMask = false">إغلاق</LhButton>
      </template>
    </LhDrawer>
  </div>
</template>

<script>
export default {
  data: () => ({
    visible: false,
    noMask: false,
    title: 'درج الجانب الأيمن',
    direction: 'right',
    size: '360px',
  }),
  methods: {
    open(dir) {
      this.direction = dir
      this.title = `درج ${dir}`
      this.size = dir === 'top' || dir === 'bottom' ? '30%' : '360px'
      this.visible = true
    },
    openNoMask() {
      this.noMask = true
    },
  },
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
v-model	هل يكون ظاهرًا (خاصية modelValue متحكَّم بها)	boolean	false
title	العنوان	string	—
direction	الاتجاه	'right' \| 'left' \| 'top' \| 'bottom'	'right'
size	الحجم: رقم بالبكسل، والسلسلة تدعم النسبة المئوية	string \| number	—
maskClosable	هل يُغلق عند النقر على القناع	boolean	true
showClose	هل يُعرض زر الإغلاق	boolean	true
teleportTarget	هدف تركيب الطبقة المنبثقة (محدِّد أو عنصر، الافتراضي body؛ لا يوجد Teleport في 2.7، يتم النقل يدويًا للمضيف)	string \| HTMLElement	—
lockScroll	هل يُقفل تمرير الصفحة	boolean	true
closeOnEsc	هل يستجيب للإغلاق بـ Esc	boolean	true
themeVars	متغيّرات السمة على مستوى المكوّن، تتجاوز تكوين ConfigProvider	Record<string, string>	—
bgPattern	خلفية النمط على مستوى المكوّن، تتجاوز تكوين ConfigProvider	string	—
sx	خصائص التخطيط السريع sx (تسري على اللوحة)	—	—

Slots

فتحة	الوصف
header	منطقة العنوان (تأخذ افتراضيًا قيمة title)
default	نص الدرج الأساسي
footer	منطقة الأزرار السفلية