TaavUI Lab
Primitive

TaavCard

سطح استاندارد برای گروه‌بندی محتوا با variant، padding و radius کنترل‌شده.

import { TaavCard } from '@repo/ui';

فقط از props رسمی TaavUI استفاده کنید. unsafeClassName و escape hatchهای مشابه فقط برای موارد نادر هستند و نباید در مثال‌های عادی دیده شوند.

استفاده پایه

RTL Preview
عنوان کارت

محتوای کارت با padding استاندارد md

<TaavCard header={...} footer={...}>محتوا</TaavCard>

Variants

پیش‌نمایش
elevated

نمونه سطح

outlined

نمونه سطح

soft

نمونه سطح

ghost

نمونه سطح

States

پیش‌نمایش

کارت تعاملی

کارت انتخاب‌شده

Props

Propنوعپیش‌فرضتوضیح
variant'elevated' | 'outlined' | 'soft' | 'ghost'outlinedنوع سطح
padding'none' | 'sm' | 'md' | 'lg'mdفاصله داخلی
radius'md' | 'lg' | 'xl' | 'xxl'lgشعاع گوشه
interactivebooleanfalsehover و حس قابل کلیک
selectedbooleanfalseحالت انتخاب‌شده
headerReactNodeبخش بالایی
footerReactNodeبخش پایینی

Design Specs

Padding mdvar(--taav-card-padding-md)
Header pyvar(--taav-card-header-py)
Radius lgvar(--taav-radius-lg)
Shadow elevatedvar(--taav-shadow-sm)
interactive

دسترس‌پذیری

راهنمای استفاده در DastRanj / VahedYek

  • برای کارت قابل کلیک از interactive استفاده کنید و محتوای دکمه جداگانه نگذارید مگر لازم باشد.
  • در DastRanj برای پنل‌های تنظیمات از variant=outlined استفاده کنید.

Do / Don't

انجام دهید

  • header/footer را برای ساختار منظم استفاده کنید

انجام ندهید

  • border-radius دلخواه خارج از radius prop ندهید