TaavUI Lab
Components

inputs

کامپوننت اصلی برای ساخت فیلدهای استاندارد کسب‌وکار با برچسب، کنترل و متن راهنما.

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

کامپوننت اصلی

شماره اختصاصی در اداره مالیات۰ / ۵۰

کد اقتصادی ۱۲ رقمی صادر شده توسط سازمان امور مالیاتی۰ / ۱۲

توکن identity-fields

توکن bank-account-input

۰ / ۲۰

توکن amount-input

این مقدار به صورت عدد ثابت برای هزینه یا پرداخت مشخص شده و مستقل از درصد یا شرایط دیگر است.

توکن percentage-input

این مقدار به صورت درصدی از مبلغ محاسبه می‌شود و با تغییر مبلغ قرارداد، به‌طور خودکار به‌روزرسانی می‌شود.

توکن naming-range-input

مانند A

شماره‌گذاری مانند از ۲ تا ۵

توکن موبایل یا ایمیل

وارد کردن شماره موبایل یا ایمیل برای ثبت کاربر ضروری می‌باشد.0/50

توکن تاریخ آخرین قسط

تاریخی که اقساط باید تا آن زمان به پایان برسند. تعداد و مبلغ اقساط بر اساس این تاریخ محاسبه می‌شود.

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

ساختار استاندارد

<TaavFieldBlock
  label="کد اقتصادی"
  required
  htmlFor="economic-code"
  supportText="کد اقتصادی ۱۲ رقمی صادر شده توسط سازمان امور مالیاتی"
>
  <TaavInput id="economic-code" />
</TaavFieldBlock>

Props

Propنوعپیش‌فرضتوضیح
label*ReactNodeعنوان فیلد بالای کنترل
required / optionalbooleanنمایش ستاره الزامی یا برچسب اختیاری
tooltip / hint / supportTextReactNodeمتن راهنمای ثابت زیر فیلد؛ نه hover tooltip
descriptionReactNodefallback برای support text وقتی tooltip/hint/supportText داده نشده باشد
error / warning / successReactNodeپیام وضعیت زیر support text؛ error اولویت بالاتر دارد
htmlForstringاتصال label به کنترل
size'sm' | 'md' | 'lg'mdspacing و تایپوگرافی الگو
align'start' | 'center' | 'end' | 'stretch'stretchتراز container کلی
labelAlign / tooltipAlign'start' | 'center' | 'end'startتراز label و متن راهنما
invalid / disabledbooleanstate بصری wrapper
children*ReactNodeTaavInput / TaavSelect / TaavTextarea یا کنترل سفارشی

دسترسی‌پذیری

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

  • برای اتصال برچسب به کنترل، htmlFor و id را با یک مقدار یکتا تنظیم کنید.
  • متن راهنما از طریق aria-describedby به کنترل فرزند متصل می‌شود.
  • required بودن فیلد با API و نشانه‌ی بصری ستاره نمایش داده می‌شود.