البطاقة

البطاقة حاوية مرنة لتجميع المحتوى ذي الصلة.

Loading demo: card-real-world

التثبيت

npx sdaia-ui@latest add card

الاستخدام

1<Card className="w-full max-w-[400px]">
2 <Card.Content
3 leadingItem={
4 <Card.LeadingItem type="featured-icon" featuredIconVariant="outline" />
5 }
6 label="Label"
7 helperText="Helper Text"
8 showCheckbox={false}
9 />
10 <Card.Footer type="actions">
11 <Button variant="primary">Action</Button>
12 <Button variant="neutral">Action</Button>
13 </Card.Footer>
14 </Card>

الأمثلة

قياسي

بطاقة منشور اجتماعي مع صورة رمزية ومحتوى وأزرار تفاعل.

Loading demo: card-social-post

الافتراضي

يعرض بطاقة متعددة الاستخدامات لتجميع المحتوى ذي الصلة.

Loading demo: card-default

المحتوى

البطاقة designed for rich text and descriptive content.

Loading demo: card-content

منتج

بطاقة منتج تحتوي على صورة وعنوان وسعر وزر إجراء.

Loading demo: card-product

عنصر

item card suited مدمج لـ list-style layouts.

Loading demo: card-item

حدث

بطاقة حدث تعرض التاريخ والعنوان والموقع.

Loading demo: card-event

منشور اجتماعي

بطاقة منشور اجتماعي مع صورة رمزية ومحتوى وأزرار تفاعل.

Loading demo: card-social-post

مهمة

بطاقة مهمة لعروض قوائم المهام وإدارة المشاريع.

Loading demo: card-task

Media ممتد

البطاقة with a media area that stretches to the full card width.

Loading demo: card-media-stretched

مرجع الواجهة البرمجية

CardProps

خصائص مكوّن Card.

Prop

Type

Default

Required

children

ReactNode

-

optional

dir

'ltr' | 'rtl'

-

optional

direction

'ltr' | 'rtl'

deprecated

optional