Control Sizev1.0.0
یک بار اندازه را برای کل فرم یا نوار ابزار تعیین کنید؛ هر کنترلی که size نگرفته باشد (Button، Input، TextField، SearchField، Select، DatePicker، NumberField، Toggle) از آن پیروی می‌کند و ردیف هم‌ارتفاع می‌ماند.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/control-size.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/control-size.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/control-size.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/control-size.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { ControlSizeProvider } from "@/components/ui/control-size"
<ControlSizeProvider size="lg">
<form className="flex flex-col gap-4">…</form>
</ControlSizeProvider>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
ControlSizeProvider فقط چند متغیر CSS (ارتفاع، اندازهٔ متن و پدینگ افقی) می‌گذارد و هیچ state یا context ری‌اکتی ندارد؛ پس در Server Component هم کار می‌کند.
اولویت: size صریح روی خود کنترل، بعد نزدیک‌ترین Provider، و اگر هیچ‌کدام نبود همان default. Providerهای تو در تو هم درست‌اند، چون نزدیک‌ترین والد برنده است.
بدون className ظرف با display: contents در چیدمان دیده نمی‌شود؛ اگر className بدهید (مثلاً flex gap-2) خودش همان ردیف می‌شود. با asChild متغیرها روی تنها فرزندتان می‌نشینند.
دسترس‌پذیری
- برای صفحه‌ای که بیشتر با لمس کار می‌کند (موبایل، کیوسک) lg یا xl بگذارید تا هدف لمسی حداقل ۴۰ تا ۴۸ پیکسل باشد.
- اندازهٔ متن همراه ارتفاع بزرگ می‌شود؛ پس کنترل بزرگ‌تر خواناتر هم هست، نه فقط بلندتر.
- Provider هیچ نقش ARIA یا عنصر معناداری اضافه نمی‌کند.
مرجع API
ControlSizeProvider
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| size | "sm" | "default" | "lg" | "xl" | — | پلهٔ اندازه برای همهٔ کنترل‌های داخلش که size نگرفته‌اند. |
| asChild | boolean | false | به‌جای div، متغیرها روی تنها فرزند می‌نشینند. |
| className | string | — | بدون آن ظرف display: contents است؛ با آن خودش ردیف یا ستون چیدمان می‌شود. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
Sizes
چهار پله: sm (۳۲)، default (۳۶)، lg (۴۰) و xl (۴۸ پیکسل).
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Override
size صریح همیشه برنده است؛ برای دکمهٔ فقط‌آیکونی از icon-xl استفاده کنید تا مربع هم‌ارتفاع بماند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
دستورالعمل استفاده
اندازه یک جا، نه روی تک‌تک کنترل‌ها
انجام بده
کل ردیف را در Provider بپیچید؛ دکمه و فیلد هر دو از یک پله می‌خوانند و هم‌ارتفاع‌اند.
انجام نده
ارتفاع را با className (h-12، h-[48px]) عوض نکنید؛ هر کنترل پدینگ و متن خودش را دارد و ردیف ناهم‌خوان می‌شود. review_code این را می‌گیرد.