TagsInput — برچسب‌ها

برای کلیدواژه، برچسب یا فهرست ایمیل. آرایهٔ رشته است.

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

TSX

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

نمونهٔ زنده

برچسب‌ها

ایده
طراحی

موضوعات

الف
ب

حداکثر ۳ موضوع2 / 3

ایمیل‌ها

کلیدواژه‌ها

توکاپس

برچسب‌ها

فقط
خواندنی

کد قابل کپی

پایه

TSX

import { TagsInput } from '@tokapps/tuk';<TagsInput label="برچسب‌ها" value={tags} onChange={setTags} placeholder="تایپ کنید و Enter بزنید" />

سقف تعداد

TSX

<TagsInput label="موضوعات" value={topics} onChange={setTopics} maxTags={3} />

اعتبارسنجی

TSX

<TagsInput label="ایمیل‌ها" value={emails} onChange={setEmails}  validate={(t) => (/^\S+@\S+\.\S+$/.test(t) ? true : 'ایمیل معتبر نیست')} />

تکراری با پیام خطا

TSX

<TagsInput label="کلیدواژه‌ها" value={kw} onChange={setKw} duplicates="reject" onReject={(r) => log(r.reason)} />

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

پراپ	نوع	پیش‌فرض	توضیح
		—	برچسب الزامی.
/	/	—	حالت کنترل‌شده.
			حالت غیرکنترلی.
		—	رشته = رد با پیام، = رد، = پذیرش.
		—	با رد شدن ( · · ).
		—	سقف تعداد؛ شمارنده نمایش داده می‌شود.
	·		پیام خطا هم می‌دهد.
			حساسیت به حروف در تشخیص تکراری.
/ /	—	—	متن‌های کمکی.
/ /			وضعیت‌ها.
		—	برای هر برچسب یک ورودی پنهان.
			برچسب دکمهٔ حذف.
/	—	/	اندازه و چاپ.

رفتار ورودی

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

دسترس‌پذیری

دکمهٔ حذف هر برچسب نام «حذف » دارد.
افزودن و حذف با (polite) و رد شدن (assertive) اعلام می‌شود.
خطا با آیکون و متن.

حرکت و چاپ

حرکت: گذار حاشیه. صدا: ندارد. چاپ: .

توکن‌ها

در ؛ فهرست در .

نکات

برای انتخاب از فهرست بسته از Select استفاده کنید.

TagsInput — برچسب‌ها

برای کلیدواژه، برچسب یا فهرست ایمیل. آرایهٔ رشته است.

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

TSX

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

کد قابل کپی

پایه

TSX

import { TagsInput } from '@tokapps/tuk';<TagsInput label="برچسب‌ها" value={tags} onChange={setTags} placeholder="تایپ کنید و Enter بزنید" />

سقف تعداد

TSX

<TagsInput label="موضوعات" value={topics} onChange={setTopics} maxTags={3} />

اعتبارسنجی

TSX

<TagsInput label="ایمیل‌ها" value={emails} onChange={setEmails}  validate={(t) => (/^\S+@\S+\.\S+$/.test(t) ? true : 'ایمیل معتبر نیست')} />

تکراری با پیام خطا

TSX

<TagsInput label="کلیدواژه‌ها" value={kw} onChange={setKw} duplicates="reject" onReject={(r) => log(r.reason)} />

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

پراپ	نوع	پیش‌فرض	توضیح
		—	برچسب الزامی.
/	/	—	حالت کنترل‌شده.
			حالت غیرکنترلی.
		—	رشته = رد با پیام، = رد، = پذیرش.
		—	با رد شدن ( · · ).
		—	سقف تعداد؛ شمارنده نمایش داده می‌شود.
	·		پیام خطا هم می‌دهد.
			حساسیت به حروف در تشخیص تکراری.
/ /	—	—	متن‌های کمکی.
/ /			وضعیت‌ها.
		—	برای هر برچسب یک ورودی پنهان.
			برچسب دکمهٔ حذف.
/	—	/	اندازه و چاپ.

رفتار ورودی

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