بطاقة (Card)

يتيح لك مكوّن بطاقة (Card) تركيب بطاقة من أجزاء: الرأس والمحتوى والتذييل.

التثبيت

bash

npx @smicolon/cli add card

قبل إضافة أي مكوّن، شغّل الأمر init مرة واحدة في مشروعك. التفاصيل في صفحة التثبيت.

معاينة

طلبك في الطريق

يصل غدًا قبل السادسة مساءً.

يتضمن الطلب رقم 4821 ثلاثة منتجات.

بطاقة بسيطة

تصلك رسالة عند تغيّر حالة طلبك.

الخصائص (props)

تقبل كل الأجزاء هذه الخصائص (props)، مع أي خاصية لعنصر div: Card، CardHeader، CardTitle، CardDescription، CardContent، CardFooter.

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`	لا يوجد	محتوى الجزء.
`className`	`string`	لا يوجد	أصناف (class) إضافية للجزء.

الاستخدام

tsx

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>طلبك في الطريق</CardTitle>
        <CardDescription>يصل غدًا</CardDescription>
      </CardHeader>
      <CardContent>تفاصيل الطلب</CardContent>
      <CardFooter>تتبّع الطلب</CardFooter>
    </Card>
  )
}