کامپوننتها
پنل قابلتغییر اندازه
دو پنل کنار هم یا زیر هم که کاربر اندازهشان را با کشیدن مرز تغییر میدهد.
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 / defaultSize | number | 40 | اندازهٔ پنل اول به درصد |
onSizeChange | (percent) => void | — | برای ذخیرهٔ اندازه |
min / max | number | 15 / 85 | محدودهٔ درصد |
label | string | «تغییر اندازهٔ پنلها» | نام دستگیره |
دسترسپذیری
دستگیره یک role="separator" فوکوسپذیر با aria-valuenow است. با ←→ (یا ↑↓ در حالت عمودی) پنج درصد، و با Home/End به کمینه و بیشینه میرود. دوبار کلیک اندازهٔ اولیه را برمیگرداند.