لوحة قابلة للطي Collapse

منطقة محتوى يمكن توسيعها / طيّها، تدعم وضع الأكورديون (فتح عنصر واحد فقط في كل مرة) والتحكم عبر v-model.

لوحة قابلة للطي

<template>
  <div class="demo-col" style="max-width: 420px">
    <p class="demo-note">يمكن توسيع عدة عناصر في آن واحد</p>
    <LhCollapse v-model="actives">
      <LhCollapseItem name="song" title="سلالة سونغ">
        <p class="demo-note">لوحة *رحلة في الجبال والوديان* لفان كوان، ولوحة *الربيع المبكر* لغوو شي.</p>
      </LhCollapseItem>
      <LhCollapseItem name="yuan" title="سلالة يوان">
        <p class="demo-note">لوحة *إقامة في جبال فوتشون* لهوانغ غونغوانغ.</p>
      </LhCollapseItem>
      <LhCollapseItem name="ming" title="سلالة مينغ" disabled>
        <p class="demo-note">لوحة معطّلة.</p>
      </LhCollapseItem>
    </LhCollapse>
    <p class="demo-note">وضع الأكورديون (فتح عنصر واحد فقط في كل مرة)</p>
    <LhCollapse v-model="active" accordion>
      <LhCollapseItem name="gongbi" title="غونغبي">
        <p class="demo-note">تخطيط دقيق، وطبقات متتابعة من الألوان.</p>
      </LhCollapseItem>
      <LhCollapseItem name="xieyi" title="شيايي">
        <p class="demo-note">انطلاق الفرشاة، ولا قصد للاشتباه بالشكل.</p>
      </LhCollapseItem>
    </LhCollapse>
    <p class="demo-note">المفتوح حاليًا: {{ Array.isArray(actives) ? actives.join('،') : actives }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({ actives: ['song'], active: 'gongbi' }),
}
</script>

Collapse Props

خاصية	الوصف	النوع	الافتراضي
v-model	اللوحات النشطة حاليًا (prop خاصية modelValue متحكَّم بها)	string \| number \| (string \| number)[]	—
accordion	وضع الأكورديون: فتح عنصر واحد فقط في كل مرة	boolean	false
sx	خصائص التخطيط السريع sx	—	—

CollapseItem Props

خاصية	الوصف	النوع	الافتراضي
name	معرّف اللوحة الفريد (مطلوب)	string \| number	—
title	العنوان (يمكن أيضا استخدام فتحة title)	string	''
disabled	تعطيل التوسيع	boolean	false
sx	خصائص التخطيط السريع sx	—	—

Events

حدث	الوصف	معامل الاستدعاء
change	يُطلق عند تغيّر اللوحات النشطة	قيمة اللوحات النشطة؛ قيمة مفردة في وضع الأكورديون، وإلا مصفوفة