TaavUI Lab
Business Form Layout

TaavFieldGrid

گرید ریسپانسیو مخصوص فرم‌های کسب‌وکاری که به‌صورت پیش‌فرض روی دسکتاپ دو ستونه و روی موبایل تک‌ستونه رفتار می‌کند.

import { TaavFieldBlock, TaavFieldGrid } from "@repo/ui/taav/forms";

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

Screenshot-like business layout

2-column responsive RTLdefault

نام رسمی ثبت شده در اداره ثبت شرکت ها

نام تجاری جهت نمایش در سامانه

شناسه ملی اشخاص حقوقی برای تمامی شرکت ها اجباری است

شماره اختصاصی ثبت در اداره ثبت شرکت ها

<TaavFieldGrid columns={2} gap="lg" density="spacious">
  <TaavFieldBlock ... />
  <TaavFieldBlock ... />
</TaavFieldGrid>

Column examples

1 column

فیلد اصلی برای ثبت رسمی

برای نمایش در سامانه

برای اشخاص حقوقی اجباری است

2 columns

فیلد اصلی برای ثبت رسمی

برای نمایش در سامانه

برای اشخاص حقوقی اجباری است

3 columns

فیلد اصلی برای ثبت رسمی

برای نمایش در سامانه

برای اشخاص حقوقی اجباری است

Responsive behavior

رفتار پیش‌فرض responsive=true است؛ یعنی فرم روی نمایشگر کوچک از یک ستون شروع می‌کند و از breakpoint دسکتاپ به چیدمان چندستونه برمی‌گردد. برای grid ثابت، responsive=false بدهید.

Props

Propنوعپیش‌فرضتوضیح
columns1 | 2 | 3 | 42تعداد ستون هدف در دسکتاپ
gap'sm' | 'md' | 'lg' | 'xl'mdگتر افقی بین ستون‌ها
density'compact' | 'comfortable' | 'spacious'comfortableفاصله عمودی ردیف‌ها
responsivebooleantrueرفتار تک‌ستونه در نمایشگر کوچک
children*ReactNodeترکیبی از TaavFieldBlock یا field wrappers دیگر

Usage notes

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

  • در فرم‌های RTL ترتیب grid طبیعی است؛ فیلد اول در ستون راست دیده می‌شود.
  • برای الگوی تصویری واحد، TaavFieldGrid را با TaavFieldBlock جفت کنید.
  • gap و density را از props تغییر دهید؛ CSS صفحه‌ای برای فاصله‌ها نسازید.
  • اگر فرم در موبایل باید یک‌ستونه بماند، responsive پیش‌فرض همان رفتار را فراهم می‌کند.

Do / Don't

انجام دهید

  • برای فرم‌های دو ستونه کسب‌وکاری از TaavFieldGrid استفاده کنید.
  • برای spacing از gap و density بهره بگیرید تا فرم در TaavUI Lab و اپ‌ها یکدست بماند.

انجام ندهید

  • فاصله بین فیلدها را با marginهای محلی هر صفحه کنترل نکنید.
  • برای فرم‌های جدید business layout جداگانه با CSS سفارشی نسازید.