CodeCells — خانه‌های کد

برای کدهای کوتاه و ثابت است: کد تأیید پیامکی (OTP)، کد جفت‌سازی دستگاه، کد بازیابی. هر کاراکتر خانهٔ خودش را دارد تا خواندن و تایپ راحت باشد. کامپوننت جدای OTP نداریم؛ همان نقش را با انجام می‌دهد.

وضعیت: beta · لایه: ۳ () · کد:

TSX

import { CodeCells } from '@tokapps/tuk';

نمونهٔ زنده

کد قابل کپی

کد تأیید پیامکی شش‌رقمی

TSX

import { CodeCells } from '@tokapps/tuk';<CodeCells label="کد تأیید" length={6} onComplete={(code) => verify(code)} />

کد جفت‌سازی با حروف فارسی

TSX

<CodeCells label="کد جفت‌سازی" length={6} alphabet="persian" value={code} onValueChange={setCode} />

نمایش کد (فقط خواندنی)

TSX

<CodeCells label="کد نمایشی" length={6} alphabet="persian" value="۴ب۷ه۲م" readOnly />

کد خطادار

TSX

<CodeCells  name="otp"  label="کد تأیید"  length={6}  isInvalid={wrongCode}  autoFocus  onValueChange={setCode}/>

همهٔ پیکربندی‌ها

نوع	پیش‌فرض	توضیح
	—	الزامی؛ نام گروه برای صفحه‌خوان. قابل‌مشاهده است یا نه، باید نام معنادار باشد.
		تعداد خانه؛ هر خانه یک کاراکتر.
·		: ۰ تا ۹ لاتین. : ارقام فارسی و حروف فارسی بدون حروف مشابه.
	—	مقدار کنترل‌شده.
		مقدار اولیه (غیرکنترل‌شده).
	—	با هر تغییر.
	—	وقتی همهٔ خانه‌ها پر شد.
		حالت خطا روی همهٔ خانه‌ها.
		غیرفعال.
		فقط نمایش؛ مثلاً کدی که باید در دستگاه دیگر وارد شود.
		فوکوس اولین خانه هنگام نمایش.
	—	نام فیلد در فرم.

ورودی هر کاربر به الفبای استاندارد تبدیل می‌شود: ارقام عربی و / عربی به فارسی؛ کاراکترهای خارج از الفبا حذف می‌شوند.

حالت‌ها

حالت	نمایش
خالی	خانه‌ها خالی با حاشیهٔ ملایم
فوکوس	خانهٔ فعال با حلقهٔ فوکوس
پر	کاراکتر بزرگ در هر خانه
	حاشیهٔ خطا روی همهٔ خانه‌ها و ؛ پیام خطا را خودتان زیر فیلد نشان دهید
/	کدری یا فقط نمایش

RTL و کیبورد

گروه همیشه است تا ترتیب کد در صفحهٔ فارسی هم ثابت بماند؛ برچسب و توضیح اطراف آن هم‌جهت صفحه‌اند.
تایپ یک کاراکتر، پرش به خانهٔ بعد؛ به عقب؛ فلش‌ها بین خانه‌ها.
چسباندن کل کد (مثلاً از پیامک) همه‌جا را پر می‌کند و را صدا می‌زند.
گروه با و خوانده می‌شود؛ هر خانه به‌شکل «برچسب: ۱ از ۶» اعلام می‌شود. خانهٔ اول دارد تا iOS و Android کد پیامک را پیشنهاد دهند.

صدا، حرکت، چاپ

صدا: این کامپوننت صدای داخلی ندارد؛ برای بازخورد صوتی، را به رویداد خودتان وصل کنید.
حرکت: فقط گذار حاشیه؛ در کاهش حرکت بدون انیمیشن.
چاپ: خانه‌ها با حاشیهٔ ساده چاپ می‌شوند.

توکن‌ها

کامپوننتی: (اندازهٔ خانه)، ، ، ، .
تعریف در ؛ فهرست کامل در .

نکات

برای کد پیامکی، را فقط وقتی فراخوانی کنید که سرور پاسخ دهد؛ بعد از چند تلاش ناموفق، فیلد را قفل کنید.
برای کد طولانی یا متن آزاد از Input استفاده کنید.