License Platev1.0.0
فیلد پلاک خودروی ایران که شبیه خودِ پلاک است: نوار آبی ابتدا، دو رقم، حرف، سه رقم و بخش «ایران». کاربر همان چیزی را می‌بیند که روی ماشین دیده، پس ترتیب را اشتباه نمی‌کند؛ برای استعلام خلافی، بیمهٔ بدنه، پارکینگ و ثبت خودرو.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/license-plate.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/license-plate.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/license-plate.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/license-plate.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { LicensePlate } from "@/components/ui/license-plate"
<LicensePlate name="plate" />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
مقدار یک شیء است: { first, letter, second, region } با ارقام لاتین. کاربر با هر کیبوردی تایپ کند ارقام فارسی نمایش داده می‌شوند و لاتین ذخیره می‌شوند. حرف از یک Select انتخاب می‌شود، چون حروف پلاک محدودند و تایپشان روی موبایل سخت است.
با پر شدن هر بخش فوکوس خودکار به بخش بعد می‌رود و Backspace در بخش خالی به بخش قبل برمی‌گردد. پلاک در هر صفحه‌ای چپ‌به‌راست است، مثل خود پلاک. formatLicensePlate مقدار را برای نمایش در متن یا جدول «۱۲ ب ۳۴۵ - ۶۷» می‌کند و isLicensePlateComplete کامل‌بودن را می‌سنجد.
دسترس‌پذیری
- کل پلاک یک role="group" با برچسب «پلاک خودرو» است (با aria-label قابل تغییر) و هر بخش برچسب خودش را دارد: «دو رقم اول پلاک»، «حرف پلاک»، «سه رقم پلاک»، «کد ایران».
- بخش‌ها inputMode="numeric" دارند تا روی موبایل صفحه‌کلید عددی باز شود.
- پرچم و نوشتهٔ I.R. IRAN تزئینی‌اند و از صفحه‌خوان پنهان‌اند.
مرجع API
LicensePlate
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| value | LicensePlateValue | — | مقدار کنترل‌شده: { first, letter, second, region } با ارقام لاتین. |
| defaultValue | LicensePlateValue | — | مقدار اولیه در حالت کنترل‌نشده. |
| onValueChange | (value: LicensePlateValue) => void | — | با هر تغییر یکی از بخش‌ها. |
| name | string | — | نام فیلد؛ پلاک کامل به‌صورت «12-ب-345-67» ارسال می‌شود. |
| invalid | boolean | false | حاشیهٔ خطا. |
| disabled | boolean | false | غیرفعال با رنگ غیرفعال. |
| required | boolean | — | همهٔ بخش‌های عددی اجباری می‌شوند. |
| aria-label | string | "پلاک خودرو" | برچسب کل پلاک برای صفحه‌خوان. |
توابع کمکی
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| formatLicensePlate | (value) => string | — | «۱۲ ب ۳۴۵ - ۶۷» برای نمایش در متن و جدول. |
| isLicensePlateComplete | (value) => boolean | — | هر چهار بخش پر و با طول درست است. |
| PLATE_LETTERS | readonly string[] | — | حروف مجاز پلاک، به ترتیب الفبا. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
کنترل‌شده با نمایش متنی
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
در فرم (name)
با name، پلاک کامل به‌صورت «12-ب-345-67» ارسال می‌شود؛ پلاک ناقص مقدار خالی می‌فرستد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
خالی
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نامعتبر (Invalid)
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
غیرفعال (Disabled)
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| کنترل‌شده با نمایش متنی | فرم استعلام که پلاک واردشده را خلاصه نشان می‌دهد |
| در فرم (name) | استعلام خلافی یا ثبت خودرو با submit معمولی |
| خالی | فرم ثبت خودروی جدید |
| نامعتبر (Invalid) | — |
| غیرفعال (Disabled) | پلاک خودرویی که قبلاً ثبت شده و قابل تغییر نیست |
دستورالعمل استفاده
پلاک را یک فیلد ببینید، نه چهار فیلد جدا
انجام بده
LicensePlate ترتیب، طول هر بخش و حروف مجاز را خودش می‌داند و یک مقدار کامل تحویل می‌دهد.
انجام نده
چهار فیلد متنی جدا ترتیب واقعی پلاک را نشان نمی‌دهند و کاربر نمی‌داند کد ایران کجا برود.