کامپوننت اصلی کارت ناوبری برای ورود به ماژولها و مراحل راهاندازی در تم روشن.
import { TaavModuleCard } from "@repo/ui/taav/business";فقط از props رسمی TaavUI استفاده کنید. unsafeClassName و escape hatchهای مشابه فقط برای موارد نادر هستند و نباید در مثالهای عادی دیده شوند.
<TaavModuleCard title="پروفایل کسبوکار" description="ورود اطلاعات پایه کسبوکار برای تنظیم قراردادها" href="#module-profile" themeMode="light" />
import { TaavModuleCard, TaavModuleCardGrid, TaavModuleCardGridItem } from "@repo/ui/taav/business";
<TaavModuleCardGrid columns={2} gap="md">
<TaavModuleCardGridItem>
<TaavModuleCard title="نماینده قانونی" description="مدیریت و تنظیم قراردادها" themeMode="light" />
</TaavModuleCardGridItem>
<TaavModuleCardGridItem>
<TaavModuleCard title="شرکای اصلی" description="مدیریت اطلاعات مرتبط با کسبوکار" themeMode="light" />
</TaavModuleCardGridItem>
</TaavModuleCardGrid>| Prop | نوع | پیشفرض | توضیح |
|---|---|---|---|
columns | 1 | 2 | 3 | 4 | 2 | تعداد ستون دسکتاپ — پیشفرض دو ستونه مانند ERP |
gap | 'sm' | 'md' | 'lg' | 'xl' | md | فاصله بین کارتها |
density | 'compact' | 'comfortable' | 'spacious' | comfortable | تراکم فاصلهگذاری |
responsive | boolean | true | در موبایل تکستونه شود |
children* | ReactNode | — | کارتها — ترجیحاً داخل TaavModuleCardGridItem |
| Prop | نوع | پیشفرض | توضیح |
|---|---|---|---|
span | 1 | 2 | 3 | 4 | 1 | پوشش چند ستون — برای کارت full-width |
responsive | boolean | true | span واکنشگرا در breakpointهای کوچک |
| Prop | نوع | پیشفرض | توضیح |
|---|---|---|---|
title* | ReactNode | — | عنوان ماژول یا بخش تنظیمات (RTL، راستچین در هدر) |
description | ReactNode | — | توضیح کوتاه زیر هدر — میتواند شامل وضعیت مثل «(تکمیل نشده)» باشد |
eyebrow | ReactNode | — | متن کمکی بالای توضیح |
status | 'default' | 'active' | 'complete' | 'incomplete' | 'locked' | 'disabled' | 'warning' | 'error' | default | وضعیت بصری — از اپ پاس داده میشود |
statusLabel | ReactNode | — | برچسب وضعیت جداگانه (اختیاری) |
icon / arrowIcon | ReactNode | — | آیکون سفارشی بدنه یا فلش هدر |
href | string | — | لینک navigation — بدون وابستگی به Next.js Link |
onClick | () => void | — | handler کلیک — در صورت نبود href، دکمه رندر میشود |
disabled / loading / selected | boolean | — | حالتهای تعاملی |
variant | 'default' | 'setup' | 'imageHeader' | 'compact' | 'flat' | setup | الگوی بصری کارت |
tone | 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info' | neutral | تن رنگ هدر/مرز |
themeMode | 'auto' | 'light' | 'dark' | auto | تم اجباری کارت یا همگام با shell |
size | 'sm' | 'md' | 'lg' | md | اندازه تایپوگرافی و padding |
width | 'auto' | 'full' | auto | عرض کارت داخل گرید |
headerPattern | 'geometric' | 'subtle' | 'none' | geometric | الگوی CSS هدر — بدون asset تصویری |
align | 'start' | 'center' | 'end' | start | تراز متن بدنه — پیشفرض راستچین RTL |
direction | 'enter' | 'back' | enter | جهت فلش هدر (RTL) |
ariaLabel | string | — | برچسب دسترسپذیری در صورت ناکافی بودن title/description |