بطاقة Card
حاوية بطاقات عامة الاستخدام.
الاستخدام الأساسي
الاستخدام الأساسي
منظر طبيعي بالحبر
جبال بعيدة كلون النيلج، ومياه قريبة يكتنفها الضباب.
هذه هي منطقة محتوى البطاقة.
بطاقة تفاعلية
عند تفعيل clickable تحمل البطاقة كاملةً دلالات button وتدعم التنشيط بلوحة المفاتيح عبر Enter / Space.
import { LhCard } from '@lh-ui/react'
export default function Demo() {
return (
<LhCard title="منظر طبيعي برسم الحبر" style={{ width: 300 }}>
<p>جبال بعيدة كلون الحبر، ومياه قريبة يعمها الضباب.</p>
</LhCard>
)
}
خصائص Card
| خاصية | الوصف | النوع | القيم المتاحة | الافتراضي |
|---|---|---|---|---|
| title | العنوان (يُعرض رأس افتراضي عند عدم وجود header) | string | — | — |
| shadow | متى تظهر الظل | 'always' | 'hover' | 'never' | — | 'always' |
| clickable | البطاقة بأكملها قابلة للنقر (تحمل دلالات لوحة المفاتيح الخاصة بزر button) | boolean | — | false |
| loading | حالة التحميل (هيكل عظمي يشغل منطقة المحتوى، وتُمنع التفاعلات في البطاقة بأكملها) | boolean | — | false |
| cover | منطقة الغلاف | ReactNode | — | — |
| header | محتوى الرأس (يتجاوز الرأس الافتراضي) | ReactNode | — | — |
| extra | منطقة إضافية في جانب الرأس | ReactNode | — | — |
| footer | منطقة التذييل | ReactNode | — | — |
| themeVars | متغيرات السمة على مستوى المكوّن، تتجاوز إعدادات ConfigProvider | Record<string, string> | — | — |
| bgPattern | خلفية النمط على مستوى المكوّن | string | — | — |
| sx | خصائص التخطيط السريع | SxProps | — | — |
أحداث Card
| حدث | الوصف | توقيع الاستدعاء | مقابل Vue |
|---|---|---|---|
| onClick | يُطلق عند النقر (فقط عند clickable وعدم loading) | (event: MouseEvent) => void | @click |
تفاعل لوحة المفاتيح
عند clickable وعدم loading، تُعرض البطاقة كـ role="button" وتستجيب للمفتاحين Enter / Space (يقوم Space باستدعاء preventDefault لمنع التمرير)، راجع إمكانية الوصول.
مقابلة فتحات Vue
فتحات plus الأربع cover / header / extra / footer تُمثل في React كخصائص ReactNode تحمل الأسماء نفسها، والفتحة الافتراضية هي children.
الأنماط
import '@lh-ui/react/style/card'