رفتن به محتوای اصلی

کامپوننت‌ها

پنل قابل‌تغییر اندازه

دو پنل کنار هم یا زیر هم که کاربر اندازه‌شان را با کشیدن مرز تغییر می‌دهد.

import { Splitter } from "@kashi-ui/react";

نمونه

فایل‌هاقرارداد-۱۴۰۵.pdfفاکتور-۱۲۸۴.xlsxلوگو.svgراهنما.md
پیش‌نمایش

مرز میان دو پنل را بکشید، یا با Tab روی آن بروید و کلیدهای جهت را بزنید. دوبار کلیک اندازه را به حالت اول برمی‌گرداند.

<Splitter label="اندازهٔ فهرست فایل‌ها" defaultSize={35} height="16rem">
<FileList />
<Preview />
</Splitter>
نامنوعپیش‌فرضتوضیح
children[ReactNode, ReactNode]—پنل ابتدا و پنل انتها
orientation"horizontal" | "vertical""horizontal"کنار هم یا زیر هم
size / defaultSizenumber40اندازهٔ پنل اول به درصد
onSizeChange(percent) => void—برای ذخیرهٔ اندازه
min / maxnumber15 / 85محدودهٔ درصد
labelstring«تغییر اندازهٔ پنل‌ها»نام دستگیره

دسترس‌پذیری

دستگیره یک role="separator" فوکوس‌پذیر با aria-valuenow است. با ←→ (یا ↑↓ در حالت عمودی) پنج درصد، و با Home/End به کمینه و بیشینه می‌رود. دوبار کلیک اندازهٔ اولیه را برمی‌گرداند.