وایب‌فارسیUI

پلاک خودرو

plate-inputکامپوننت

چیدمان ۲ رقم، حرف، ۳ رقم و کد شهر مثل پلاک واقعی؛ انتخاب حرف از فهرست با معنی هر حرف؛ تایپ پیوسته بین جعبه‌ها.

نصب

  1. با CLI

    اگر هنوز init نکرده‌اید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور قطعه و وابستگی‌هایش را می‌نویسد.

    $ npx vibefarsi add plate-input

  2. نصب دستی

    محتوای تب «کد» را در components/ui/plate-input.tsx بگذارید.

    $ npm i lucide-react
    کپی کل فایلregistry json

استفاده

usage.tsx
1import { PlateInput } from "@/components/ui/plate-input"2import { stringifyPlate } from "@/lib/persian"34<PlateInput onChange={(plate, complete) => complete && setPlate(stringifyPlate(plate))} />56// فقط تاکسی:7<PlateInput letters={["ت"]} />

پراپ‌ها

پراپنوعپیش‌فرضتوضیح
value / defaultValuePlateValue-{ left, letter, middle, region } با رقم‌های لاتین.
onChange(value, complete) => void-complete وقتی هر چهار بخش پر و حرف مجاز باشد.
lettersstring[]-محدود کردن حرف‌های مجاز، مثلاً ["ت"] برای تاکسی.
namestring-ورودی مخفی با مقدار «12ب345-11» برای فرم معمولی.

نکته‌های راست‌چین

  • خود پلاک dir="ltr" است چون روی فلز از چپ خوانده می‌شود؛ فهرست حرف‌ها rtl است و کلیدهای چپ/راست در آن برعکس می‌شوند.
  • تایپ حرف روی جعبه‌ی حرف هم کار می‌کند: ي و ك عربی به ی و ک، و «ا» به «الف» تبدیل می‌شود.
  • چسباندن کل پلاک در جعبه‌ی اول همه‌ی بخش‌ها را پر می‌کند.
قبلیشماره‌ی کارتبعدیبازه‌ی تاریخ شمسی