Alphabet Indexv1.0.0
نوارِ مرسومِ حروف در بالای فهرست‌های الفبایی بلند: واژه‌نامه، مخاطبان، برندها، شهرها. حروف بی‌قاب و پشت‌سرِهم‌اند، حرفِ فعال رنگی با خطی زیرش، و حرفی که مدخلی ندارد کم‌رنگ و غیرقابلِ انتخاب است تا کاربر بداند زیرش چیزی نیست. پیش‌فرض الفبای فارسی است و «آ» زیرِ «ا» می‌آید.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/alphabet-index.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/alphabet-index.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/alphabet-index.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/alphabet-index.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { AlphabetIndex } from "@/components/ui/alphabet-index"این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
یک کامپوننت. در حالتِ فیلتر هر حرف یک دکمه است و onValueChange حرف یا null (همه) را می‌دهد؛ کلیکِ دوباره روی حرفِ فعال فیلتر را برمی‌دارد. در حالتِ پرش با getHref هر حرف لینکی به سرفصلِ خودش است. available حروفِ دارای مدخل را می‌گیرد و بقیه را غیرفعال می‌کند.
دسترس‌پذیری
- نوار یک nav با aria-label است («حروف الفبا» یا متنِ دقیق‌تر مثل «فیلتر شهرها با حرف اول»).
- در حالتِ فیلتر حرفِ فعال aria-pressed دارد و در حالتِ پرش aria-current؛ صفحه‌خوان وضعیت را می‌خواند.
- حرفِ بی‌مدخل disabled یا aria-disabled است و با رنگِ placeholder کم‌رنگ می‌شود، نه opacity.
- هر حرف دست‌کم ۳۶ پیکسل ارتفاع و ۳۲ پیکسل عرض دارد تا در گوشی هم لمس‌شدنی بماند.
مرجع API
AlphabetIndex
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| letters | string[] | الفبای فارسی | حروف به ترتیبِ نمایش. |
| value | string | null | null | حرفِ فعال؛ null یعنی همه. |
| onValueChange | (letter: string | null) => void | — | با انتخاب یا برداشتنِ حرف صدا زده می‌شود. |
| available | Iterable<string> | — | حروفِ دارای مدخل؛ بقیه غیرفعال می‌شوند. |
| allLabel | ReactNode | false | "همه" | برچسبِ گزینهٔ همه در ابتدای نوار؛ false یعنی بدونِ آن. |
| getHref | (letter: string) => string | — | حالتِ پرش: هر حرف لینکی به این آدرس. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
الفبای لاتین
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
پرش به سرفصل
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| الفبای لاتین | فهرستِ انگلیسیِ اصطلاح‌ها یا برندهای خارجی |
| پرش به سرفصل | صفحه‌ای که همهٔ مدخل‌ها را با سرفصلِ حرف نشان می‌دهد |
دستورالعمل استفاده
نوارِ حروف برای فهرستِ بلندِ الفبایی، نه برای چند دسته
انجام بده
فهرستی با ده‌ها یا صدها مدخلِ الفبایی؛ حروفِ بی‌مدخل غیرفعال‌اند.
پنج دسته را با حروف فیلتر نکن.
انجام نده
برای چند دستهٔ محدود (مثلاً پنج موضوع) از ChoiceChips یا Tabs استفاده کن، نه نوارِ حروف.