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

مجموعة لوحات مطوية بوضع الأكورديون أو بتعدد العناصر المفتوحة، موائمةً تمامًا لنمط APG accordion.

الاستخدام الأساسي

الاستخدام الأساسي

الحفاظ على اتساق مرئي وتفاعلي مع الصفحة بأكملها.

تقديم تغذية راجعة واضحة وآنية بالحالة بعد كل عملية.

<script setup lang="ts">
</script>

<template>
  <LhCollapse>
    <LhCollapseItem name="a" title="الاتساق والتنوع">محتوى</LhCollapseItem>
    <LhCollapseItem name="b" title="التغذية الراجعة">محتوى</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {}
</script>

<template>
  <LhCollapse>
    <LhCollapseItem name="a" title="الاتساق والتنوع">محتوى</LhCollapseItem>
    <LhCollapseItem name="b" title="التغذية الراجعة">محتوى</LhCollapseItem>
  </LhCollapse>
</template>

الأكورديون

أكورديون

يُفتح عنصر واحد فقط في آنٍ واحد.

يُسمح بطيّ جميع العناصر.

<script setup lang="ts">
</script>

<template>
  <LhCollapse accordion>
    <LhCollapseItem name="a" title="فتح عنصر واحد فقط">محتوى</LhCollapseItem>
    <LhCollapseItem name="b" title="النقر مرة أخرى للطي">محتوى</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {}
</script>

<template>
  <LhCollapse accordion>
    <LhCollapseItem name="a" title="فتح عنصر واحد فقط">محتوى</LhCollapseItem>
    <LhCollapseItem name="b" title="النقر مرة أخرى للطي">محتوى</LhCollapseItem>
  </LhCollapse>
</template>

v-model محكوم والعناصر المعطّلة

يتحكم v-model محكومًا باللوحات المفتوحة حاليًا (قيمة مفردة أو مصفوفة، وفق وضع الأكورديون)؛ ويُعطِّل disabled لوحة واحدة.

فتح محكوم

محتوى محكوم A

محتوى معطّل

محتوى محكوم C

<script setup>
import { ref } from 'vue'

const activeNames = ref(['a'])
</script>

<template>
  <LhCollapse v-model="activeNames">
    <LhCollapseItem name="a" title="لوحة A">محتوى محكوم A</LhCollapseItem>
    <LhCollapseItem name="b" title="لوحة B (معطّلة)" disabled>محتوى معطّل</LhCollapseItem>
    <LhCollapseItem name="c" title="لوحة C">محتوى محكوم C</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {
  data() {
    return { activeNames: ['a'] }
  },
}
</script>

<template>
  <LhCollapse v-model="activeNames">
    <LhCollapseItem name="a" title="لوحة A">محتوى محكوم A</LhCollapseItem>
    <LhCollapseItem name="b" title="لوحة B (معطّلة)" disabled>محتوى معطّل</LhCollapseItem>
    <LhCollapseItem name="c" title="لوحة C">محتوى محكوم C</LhCollapseItem>
  </LhCollapse>
</template>

API

خصائص LhCollapse

الخاصية	الوصف	النوع	الافتراضي
modelValue	اللوحات النشطة حاليًا (v-model محكوم، قيمة مفردة أو مصفوفة)	LhCollapseKey | LhCollapseKey[]	—
accordion	وضع الأكورديون: لا يُفتح سوى عنصر واحد في آنٍ واحد	boolean	false
sx	خصائص التخطيط السريع sx	LhSxProps	—

أحداث LhCollapse

الحدث	الوصف	معاملات الاستدعاء
update:modelValue	يُطلق عند تغيّر اللوحات المفتوحة (v-model محكوم)	(value: LhCollapseKey | LhCollapseKey[])
change	يُطلق عند تغيّر اللوحات المفتوحة (غير محكوم؛ قيمة مفردة في وضع الأكورديون)	(value: LhCollapseKey | LhCollapseKey[])

خصائص LhCollapseItem

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

الفتحات: title العنوان، default المحتوى.

إمكانية الوصول

• مواءمة لنمط APG accordion: العنوان هو عنصر <button aria-expanded aria-controls> حقيقي، ومنطقة المحتوى role="region" + aria-labelledby
• التبديل عبر Enter / Space؛ والعناصر المعطّلة تُزال من التفاعل عبر disabled أصلي
• يُحقَّق انتقال الارتفاع عبر grid-template-rows: 0fr/1fr في CSS (دون قياس الارتفاع بـ JS)، مع احترام prefers-reduced-motion

تعريفات الأنواع

بنى TypeScript التي يصدّرها هذا المكوّن خارجيًا (مستخرَجة تلقائيًا من packages/components/collapse/src/types.ts و@lh-ui/share/core/*؛ انقر كل عنصر لعرض التعريف كاملًا؛ وصف الخصائص في جدول الخصائص أعلاه):

LhCollapseProps

/** خصائص لوحة الطي */
export interface LhCollapseProps {
  /** اللوحات النشطة حاليًا (v-model محكوم: Omit لتسهيل القيمة المفردة في وضع الأكورديون) */
  modelValue?: LhCollapseKey | LhCollapseKey[]
  /** وضع الأكورديون: لا يُفتح سوى عنصر واحد في آنٍ واحد */
  accordion?: boolean
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhCollapseItemProps

/** خصائص عنصر اللوحة */
export interface LhCollapseItemProps {
  /** المُعرِّف الفريد للوحة (مطلوب) */
  name: LhCollapseKey
  /** العنوان (يمكن أيضًا استخدام فتحة title) */
  title?: string
  disabled?: boolean
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhCollapseKey _{(مأخوذ من @lh-ui/share/core/collapse)}

export type LhCollapseKey = string | number