diff --git a/apps/www/content/docs/components/resizable.mdx b/apps/www/content/docs/components/resizable.mdx index d3acfe40928..049268e0320 100644 --- a/apps/www/content/docs/components/resizable.mdx +++ b/apps/www/content/docs/components/resizable.mdx @@ -127,3 +127,55 @@ export default function Example() { ) } ``` + +### Control + +You can control the panel status by using refs. + + + +```tsx showLineNumbers {11,34,13-21} +import { useRef } from "react" +import { Button } from "@/components/ui/button" +import { ImperativePanelHandle } from "react-resizable-panels" +import { + ResizableHandle, + ResizablePanel, + ResizablePanelGroup, +} from "@/components/ui/resizable" + +export default function Example() { + const leftPanelRef = useRef(null) + + const toggleLeftPanel = () => { + if (leftPanelRef.current) { + if (leftPanelRef.current.isCollapsed()) { + leftPanelRef.current.expand() + } else { + leftPanelRef.current.collapse() + } + } + } + + return ( + + + + + + + Left Panel + + + ) +} +``` diff --git a/apps/www/registry/default/example/resizable-control.tsx b/apps/www/registry/default/example/resizable-control.tsx new file mode 100644 index 00000000000..ccdc33429b6 --- /dev/null +++ b/apps/www/registry/default/example/resizable-control.tsx @@ -0,0 +1,47 @@ +import { useRef } from "react" +import { Button } from "@/registry/default/ui/button" +import { + ResizableHandle, + ResizablePanel, + ResizablePanelGroup, +} from "@/registry/default/ui/resizable" +import { ImperativePanelHandle } from "react-resizable-panels" + +export default function ResizableDemo() { + const leftPanelRef = useRef(null) + + const toggleLeftPanel = () => { + if (leftPanelRef.current) { + if (leftPanelRef.current.isCollapsed()) { + leftPanelRef.current.expand() + } else { + leftPanelRef.current.collapse() + } + } + } + + return ( + + +
+ +
+
+ + +
+ Left Resizable Panel +
+
+
+ ) +} \ No newline at end of file diff --git a/apps/www/registry/new-york/example/resizable-control.tsx b/apps/www/registry/new-york/example/resizable-control.tsx new file mode 100644 index 00000000000..07f0cdcc5b5 --- /dev/null +++ b/apps/www/registry/new-york/example/resizable-control.tsx @@ -0,0 +1,47 @@ +import { + ResizableHandle, + ResizablePanel, + ResizablePanelGroup, +} from "@/registry/new-york/ui/resizable" +import { useRef } from "react" +import { Button } from "@/registry/new-york/ui/button" +import { ImperativePanelHandle } from "react-resizable-panels" + +export default function ResizableDemo() { + const leftPanelRef = useRef(null) + + const toggleLeftPanel = () => { + if (leftPanelRef.current) { + if (leftPanelRef.current.isCollapsed()) { + leftPanelRef.current.expand() + } else { + leftPanelRef.current.collapse() + } + } + } + + return ( + + +
+ +
+
+ + +
+ Left Resizable Panel +
+
+
+ ) +} \ No newline at end of file diff --git a/apps/www/registry/registry-examples.ts b/apps/www/registry/registry-examples.ts index fde9da6d44e..98b74260381 100644 --- a/apps/www/registry/registry-examples.ts +++ b/apps/www/registry/registry-examples.ts @@ -962,6 +962,17 @@ export const examples: Registry = [ }, ], }, + { + name: "resizable-control", + type: "registry:example", + registryDependencies: ["resizable"], + files: [ + { + path: "example/resizable-control.tsx", + type: "registry:example", + }, + ], + }, { name: "scroll-area-demo", type: "registry:example",