بطاقة
Cardسطح بطاقة مركب في React يضم الصورة، الأيقونة، الرأس، المحتوى، التذييل، والأقسام القابلة للتوسيع. يوفر نمطاً قابلاً للاختيار وآخر تفاعلياً للوحات التحكم والبوابات.
يتكون Card من مجموعة أجزاء. ركب منها رأساً، محتوى، وتذييلاً حسب حاجتك.
متى تستخدمه
استخدم Card لتجميع محتوى مترابط في سطح واحد: ملخص خدمة، طلب في قائمة، أو بلاطة في لوحة تحكم. ركب الأجزاء التي تحتاجها فقط. اجعل البطاقة تفاعلية حين تقود البطاقة كلها إلى وجهة واحدة، وقابلة للاختيار حين يختار المستخدم من بين بطاقات.
تجنب وضع بطاقة داخل أخرى، واستخدم Divider أو المسافات داخل البطاقة بدلاً من ذلك.
أمثلة
الخصائص
الخصائص التي يعرفها Card. سمات العنصر الأصلي تمر كما هي.
<Card>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
variant | "outline" | "ghost" | "default" | "elevated" | "plain" | "filled" | "gradient" | ||
padding | "sm" | "md" | "lg" | ||
orientation | "vertical" | "horizontal" | ||
interactive | boolean | ||
align | "center" | "start" | ||
asChild | boolean | Render as the single child element instead of a <div> (see Button). | |
disabled | boolean | DGA Disabled state - mutes the surface (gray-200 bg / gray-400 text + icon)
and marks the card aria-disabled. Suppresses Selectable toggling. | |
selectable | boolean | DGA Type=Selectable - the whole card becomes a checkbox (role="checkbox",
Space toggles) with a checkbox indicator at the top inline-end. Controlled
via selected or uncontrolled via defaultSelected. Ignores asChild. | |
selected | boolean | Controlled selected state (Selectable). | |
defaultSelected | boolean | Uncontrolled initial selected state (Selectable). | |
onSelectedChange | (selected: boolean) => void | Fires with the next selected value when the user toggles a Selectable card. | |
expandable | boolean | DGA Type=Expandable - renders a chevron toggle (icon-only Subtle button) at
the bottom inline-end that shows/hides a <CardExpandableContent> region.
Controlled via expanded or uncontrolled via defaultExpanded. | |
expanded | boolean | Controlled expanded state (Expandable). | |
defaultExpanded | boolean | Uncontrolled initial expanded state (Expandable). | |
onExpandedChange | (expanded: boolean) => void | Fires with the next expanded value when the user toggles an Expandable card. | |
expandLabel | string | Accessible label for the expand/collapse toggle. Default 'Toggle details'. |
<CardIcon>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
asChild | boolean | ||
featured | boolean | Render the DGA Platforms Code "Featured Icon" treatment - a 48px brand-light circle around the glyph (vs the bare inline icon). Pair with the SDGA Card pattern (featured icon → title → content → footer). | |
size | "md" | "lg" | Featured circle size: md 48px / 24px glyph (default) · lg 56px / 28px glyph (stat tiles). |
<CardTitle>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
asChild | boolean | Override the heading element (e.g. render an <h2> or <a>). |
<CardDescription>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
asChild | boolean | ||
minLines | number | Reserve room for at least this many 24px lines so cards in a row keep one height (the SDGA mobile News card draws four). | |
clamp | number | Truncate after this many lines with an ellipsis. |
<CardImage>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
aspectRatio | string | Aspect ratio of the image in vertical orientation (e.g. '16/9', '4/3',
'1/1'). Default '16/9', or 'auto' when blockSize is set. Ignored in
horizontal orientation, where the image fills the card's full height. | |
blockSize | string | number | Fixed height in px or any CSS length (the SDGA image slot is 250 tall). |
إمكانية الوصول
تعمل البطاقة العادية كحاوية عامة بلا دور. تعرض البطاقات التفاعلية role="button" وتستجيب لمفتاح Enter، وتعرض البطاقات القابلة للاختيار role="checkbox" مع aria-checked. يربط المحتوى القابل للتوسيع مشغله بـ aria-expanded وaria-controls.
أعط البطاقة عنواناً عبر CardTitle ليتنقل مستخدمو قارئات الشاشة بين العناوين.