Masked Valuev1.0.0
برای موجودیِ کیف پول، درآمد یا دارایی که کاربر می‌خواهد جلوی دیگران پنهان کند. مقدار و نقاب در یک خانهٔ grid روی هم‌اند و فقط یکی دیده می‌شود، پس پهنا همیشه ثابت است: با زدنِ دکمهٔ چشم، مبلغ، واحد و خودِ دکمه جابه‌جا نمی‌شوند.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/masked-value.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/masked-value.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/masked-value.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/masked-value.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { MaskedValue } from "@/components/ui/masked-value"این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
MaskedValue فقط مقدار را پنهان می‌کند؛ دکمهٔ چشم جدا است تا هر جا لازم است بنشیند و یک دکمه بتواند چند مقدار را با هم پنهان کند. state را خودتان نگه دارید و اگر کاربر انتظار دارد انتخابش بماند، در تنظیماتِ حسابش ذخیره کنید.
دسترس‌پذیری
- در حالتِ پنهان، صفحه‌خوان «پنهان» می‌شنود (hiddenLabel)، نه نقطه‌ها و نه مقدارِ واقعی.
- دکمهٔ کنارش aria-pressed و برچسبِ فعل‌محور دارد: «پنهان‌کردنِ موجودی» و «نمایشِ موجودی».
- پهنا ثابت است، پس با زوم یا فونتِ بزرگ هم آشکار و پنهان کردن چیدمان را نمی‌شکند.
مرجع API
MaskedValue
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| value | React.ReactNode | — | مقدارِ واقعی، معمولاً با formatCurrency. |
| hidden | boolean | — | حالتِ پنهان؛ state را صفحه نگه می‌دارد. |
| mask | React.ReactNode | "••••••" | نقابِ حالتِ پنهان. |
| hiddenLabel | string | "پنهان" | متنی که صفحه‌خوان در حالتِ پنهان می‌خواند. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
چند مقدار با یک دکمه
یک state برای همهٔ مقدارهای کارت؛ ستونِ مقادیر با پنهان شدن کوچک یا بزرگ نمی‌شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| چند مقدار با یک دکمه | دارایی‌ها، درآمدِ ماه |
دستورالعمل استفاده
پنهان کن بی‌آنکه چیدمان بپرد
انجام بده
MaskedValue که پهنایش با پنهان شدن عوض نمی‌شود؛ دکمهٔ چشم سرِ جایش می‌ماند.
انجام نده
جایگزین کردنِ مبلغ با «••••••» در همان span؛ متن کوتاه می‌شود و دکمهٔ کنارش زیرِ انگشتِ کاربر جابه‌جا می‌شود.