Resizable
ناحیهای که به چند پنل تقسیم میشود و کاربر با کشیدن جداکننده سهم هرکدام را عوض میکند؛ مثل پنل کناری ویرایشگر یا صفحهٔ ایمیل. اندازهها با صفحهکلید هم قابل تغییرند.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/resizable.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/resizable.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/resizable.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/resizable.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable"
<ResizablePanelGroup orientation="horizontal">
<ResizablePanel defaultSize={25} minSize={15}>سایدبار</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel>محتوا</ResizablePanel>
</ResizablePanelGroup>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
دسترسپذیری
- جداکننده نقش separator با aria-valuenow دارد و با Tab فوکوس میگیرد؛ کلیدهای جهتدار اندازه را کم و زیاد میکنند.
- دوبار کلیک روی جداکننده پنل را به اندازهٔ پیشفرضش برمیگرداند (با disableDoubleClick خاموش میشود).
- برای هر جداکننده در چیدمانهای پیچیده aria-label بگذارید تا معلوم باشد کدام دو ناحیه را جدا میکند.
- minSize را طوری بگذارید که محتوا در کوچکترین حالت هم خوانا بماند؛ پنلِ لهشده برای کاربر بزرگنماییکننده غیرقابل استفاده است.
- این الگو روی موبایل کار نمیکند؛ برای صفحههای کوچک چیدمان را عمودی یا تکستونی کنید.
مرجع API
ResizablePanelGroup
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | جهت چیدمان پنلها. |
| defaultLayout | number[] | — | اندازهٔ اولیهٔ همهٔ پنلها بهصورت آرایه؛ جایگزین defaultSize تکتک پنلها. |
| onLayoutChange | (layout: number[]) => void | — | هنگام تغییر اندازه صدا زده میشود؛ برای ذخیره در کوکی یا localStorage. |
| id | string | — | شناسهٔ گروه؛ برای بازیابی چیدمان ذخیرهشده لازم است. |
ResizablePanel
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| defaultSize | number | — | اندازهٔ اولیه بر حسب درصد از کل گروه. |
| minSize / maxSize | number | — | کمینه و بیشینهٔ درصدی که این پنل میتواند بگیرد. |
| collapsible | boolean | false | اجازهٔ جمع شدن کامل با کشیدن تا انتها. |
| collapsedSize | number | 0 | درصدی که در حالت جمعشده باقی میماند. |
| onResize | (size: PanelSize) => void | — | هنگام تغییر اندازهٔ همین پنل صدا زده میشود. |
ResizableHandle
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| withHandle | boolean | false | نمایش دستگیرهٔ دیداری وسط خط جداکننده. |
| disabled | boolean | false | قفل کردن تغییر اندازه از این جداکننده. |
| disableDoubleClick | boolean | false | خاموش کردن بازگشت به اندازهٔ پیشفرض با دوبار کلیک. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
Vertical
با orientation=«vertical» پنلها روی هم مینشینند و جداکننده افقی میشود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Nested Groups
یک گروه میتواند داخل پنلِ گروه دیگری بنشیند؛ چیدمان سهناحیهای کلاسیک ایمیل.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Collapsible Panel
پنل میتواند تا اندازهٔ صفر جمع شود؛ collapsedSize حداقل باقیمانده را تعیین میکند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Without Handle Grip
بدون withHandle فقط یک خط باریک میماند؛ ناحیهٔ گرفتن همچنان پهنتر از خط است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| Vertical | با orientation=«vertical» پنلها روی هم مینشینند و جداکننده افقی میشود. |
| Nested Groups | یک گروه میتواند داخل پنلِ گروه دیگری بنشیند؛ چیدمان سهناحیهای کلاسیک ایمیل. |
| Collapsible Panel | پنل میتواند تا اندازهٔ صفر جمع شود؛ collapsedSize حداقل باقیمانده را تعیین میکند. |
| Without Handle Grip | بدون withHandle فقط یک خط باریک میماند؛ ناحیهٔ گرفتن همچنان پهنتر از خط است. |
دستورالعمل استفاده
کمینهٔ اندازه برای پنلها
انجام بده
با minSize جلوی له شدن پنل را بگیرید تا محتوا در کوچکترین حالت هم خوانا بماند.
انجام نده
بدون کمینه، کاربر میتواند پنل را تا نزدیک صفر بکشد؛ محتوا بریده میشود و برگرداندنش سخت است.
دستگیرهٔ دیدنی
انجام بده
withHandle جای گرفتن را نشان میدهد؛ بدون نشانهٔ دیداری، کاربر نمیداند این مرز قابل کشیدن است.
انجام نده
خط باریک بدون دستگیره در نگاه اول از یک جداکنندهٔ ساده قابل تشخیص نیست؛ قابلیت تغییر اندازه پنهان میماند.