Choice Chipsv1.0.0
برای فیلترهای پرتکرار (تخصصِ پزشک، دستهٔ غذا، وضعیت) و انتخابِ چندتایی (برچسب‌های نظر، علاقه‌مندی‌ها). روی ToggleGroup ساخته شده، پس با جهت‌نماها پیمایش می‌شود و هر چیپ aria-pressed دارد. اندازه‌اش چیپ است، نه دکمه: ۳۶ و در گوشی ۳۲ پیکسل. گزینه‌ها به خطِ بعد می‌روند؛ برای یک ردیفِ اسکرولی wrap={false}.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/choice-chips.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/choice-chips.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/choice-chips.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/choice-chips.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { ChoiceChip, ChoiceChips } from "@/components/ui/choice-chips"این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
ChoiceChips گروه است و همان پراپ‌های ToggleGroup را می‌گیرد (type، value، onValueChange)؛ هر ChoiceChip یک گزینه با count اختیاری. برای فیلترِ تک‌گزینه‌ای که همیشه باید یک مقدار داشته باشد، در onValueChange مقدارِ خالی را نپذیرید.
دسترس‌پذیری
- گروه برچسب لازم دارد: aria-label یا aria-labelledby به Labelِ دیدنی.
- پیمایش با جهت‌نماها (الگوی toolbar) و انتخاب با Space یا Enter؛ حالتِ هر چیپ با aria-pressed اعلام می‌شود.
- چیپِ انتخاب‌شده هم رنگ عوض می‌کند هم وزنِ متن؛ فقط به رنگ تکیه نمی‌کند.
مرجع API
ChoiceChips
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| type | "single" | "multiple" | — | تک یا چندگزینه‌ای؛ value و onValueChange به همین شکل. |
| value / onValueChange | string | string[] | — | انتخابِ کنترل‌شده. |
| wrap | boolean | true | شکستن به خطِ بعد یا یک ردیفِ اسکرولی. |
| size / mobileSize | "sm" | "default" | "lg" | "xl" | "default" / "sm" | اندازهٔ چیپ؛ پیش‌فرض ۳۶ و در گوشی ۳۲. |
ChoiceChip
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| value | string | — | مقدارِ گزینه. |
| count | React.ReactNode | — | شمارِ نتیجه کنارِ برچسب، با ارقامِ فارسی. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
چندگزینه‌ای (type=multiple)
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
یک ردیفِ اسکرولی (wrap=false)
وقتی ارتفاع محدود است، ردیف اسکرولِ افقی می‌خورد و گزینهٔ نیمه‌پیدا نشان می‌دهد ادامه دارد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| چندگزینه‌ای (type=multiple) | برچسب‌های فرمِ نظر |
| یک ردیفِ اسکرولی (wrap=false) | دسته‌های منوی صندوق که جای دو ردیف ندارند |
دستورالعمل استفاده
چیپ برای فهرستِ قابلِ‌شکستن، سگمنت برای چند نمای هم‌وزن
انجام بده
شش تخصص که به خطِ بعد می‌روند؛ هیچ گزینه‌ای در لبه بریده نمی‌شود.
انجام نده
همان شش گزینه در سگمنت؛ در عرضِ کم از کادر بیرون می‌زند یا گزینهٔ آخر بریده می‌شود.