Resizable Panel Group

Fare ve klavye ile yeniden boyutlandırılabilen iki panelli düzen.

ResizablePanelGroup.tsx

Dosyalar

export function App() {
return <main />
}

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/resizable-panel-group.json

import { ResizablePanelGroup } from "@/components/ui"

<ResizablePanelGroup first={<Sidebar />} second={<Editor />} defaultSize={30} />

Prop	Tür	Varsayılan	Açıklama
first	ReactNode	—	İlk panel içeriği.
second	ReactNode	—	İkinci panel içeriği.
defaultSize	number	50	İlk panelin yüzde cinsinden başlangıç boyutu.
minSize	number	20	İlk panelin asgari yüzdesi.
maxSize	number	80	İlk panelin azami yüzdesi.
orientation	"horizontal" \| "vertical"	"horizontal"	Panel yerleşim yönü.
resizeLabel	string	"Panel boyutunu değiştir"	Ayırıcının erişilebilir adı.