Resizable

نصب

pnpm dlx @simurgh-ui/cli add resizable

import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from '@simurgh-ui/react/resizable';
import '@simurgh-ui/styles/resizable.css';

پیش‌نمایش واقعی

Live component Resizable ◆

Navigation

Content

استفاده

<ResizablePanelGroup aria-label="پنل‌های فضای کار">
  <ResizablePanel defaultSize={35} minSize={20}>پیمایش</ResizablePanel>
  <ResizableHandle aria-label="تغییر اندازهٔ پنل‌ها" />
  <ResizablePanel defaultSize={65} minSize={30}>محتوا</ResizablePanel>
</ResizablePanelGroup>

Handle با Arrowها اندازه را تغییر می‌دهد و mapping افقی در RTL معکوس می‌شود. minSize و maxSize باید از ناپدیدشدن محتوا جلوگیری کنند. Handle به accessible name، focus indicator واضح و target pointer کافی نیاز دارد.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.