بطاقة Card

حاوية تجمع المعلومات. بنية ثلاثية الأقسام — العنوان والمحتوى ومنطقة العمليات — مع دعم هيكلية التحميل وظلّ التمرير.

بطاقة

<template>
  <div class="demo-row" style="align-items: flex-start">
    <LhCard title="لوحة رحلة في الجبال والوديان" style="width: 240px">
      <p class="demo-note">فان كوان · سلالة سونغ الشمالية. تُرسم الجبال بلمسات النقاط، في مشهد مهيب.</p>
      <template #actions>
        <LhButton size="small">تأمّل</LhButton>
        <LhButton size="small" type="primary">إضافة للمفضلة</LhButton>
      </template>
    </LhCard>
    <LhCard title="حالة التحميل" loading style="width: 240px">
      <p class="demo-note">يُحجز محتوى المنطقة بهيكل عظمي.</p>
    </LhCard>
    <LhCard title="بطاقة قابلة للنقر" clickable shadow="hover" style="width: 240px">
      <p class="demo-note">مع shadow=hover ترتفع البطاقة عند التمرير عليها، ويتولّى clickable الدلالات الدلالية للزر.</p>
    </LhCard>
    <LhCard style="width: 240px">
      <template #header>
        <span style="font-weight: 600">عنوان عبر فتحة header</span>
      </template>
      <p class="demo-note">يُستخدم title أو فتحة header، لا كلاهما.</p>
    </LhCard>
  </div>
</template>

Props

خاصية	الوصف	النوع	الافتراضي
title	العنوان (يمكن أيضا استخدام فتحة header)	string	''
shadow	وقت ظهور الظل	'always' \| 'hover' \| 'never'	'always'
clickable	البطاقة كلها قابلة للنقر (تتولّى دلالات لوحة المفاتيح للزر)	boolean	false
loading	حالة التحميل: يُحجز محتوى المنطقة بهيكل عظمي	boolean	false
themeVars / bgPattern / sx	تجاوزات السمة	—	—

Slots

فتحة	الوصف
header	منطقة العنوان (بديل لـ title)
default	منطقة المحتوى
actions	منطقة العمليات (في الأسفل)