mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-26 14:16:08 +00:00
f6f64ce773
### Overview This pull request updates the documentation to reflect the correct component name, changing `ResizableGroup` to `ResizablePanelGroup`. This change ensures consistency and correctness in the documentation, aiding developers in correctly implementing the component. ### Changes Made - In the code examples within the documentation, `ResizableGroup` has been renamed to `ResizablePanelGroup`. - This change is applied to both horizontal and vertical orientation examples. ### Additional Information - These changes are confined to documentation and do not alter the actual implementation or functionality of the components in question. Please review the changes for accuracy and merge if appropriate. Thanks!
121 lines
2.4 KiB
Plaintext
121 lines
2.4 KiB
Plaintext
---
|
|
title: Resizable
|
|
description: Accessible resizable panel groups and layouts with keyboard support.
|
|
component: true
|
|
links:
|
|
doc: https://github.com/bvaughn/react-resizable-panels
|
|
api: https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels
|
|
---
|
|
|
|
<ComponentPreview name="resizable-demo" />
|
|
|
|
## About
|
|
|
|
The `Resizable` component is built on top of [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) by [bvaughn](https://github.com/bvaughn).
|
|
|
|
## Installation
|
|
|
|
<Tabs defaultValue="cli">
|
|
|
|
<TabsList>
|
|
<TabsTrigger value="cli">CLI</TabsTrigger>
|
|
<TabsTrigger value="manual">Manual</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="cli">
|
|
|
|
```bash
|
|
npx shadcn-ui@latest add resizable
|
|
```
|
|
|
|
</TabsContent>
|
|
|
|
<TabsContent value="manual">
|
|
|
|
<Steps>
|
|
|
|
<Step>Install the following dependencies:</Step>
|
|
|
|
```bash
|
|
npm install react-resizable-panels
|
|
```
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource name="resizable" />
|
|
|
|
<Step>Update the import paths to match your project setup.</Step>
|
|
|
|
</Steps>
|
|
|
|
</TabsContent>
|
|
|
|
</Tabs>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import {
|
|
ResizableHandle,
|
|
ResizablePanel,
|
|
ResizablePanelGroup,
|
|
} from "@/components/ui/resizable"
|
|
```
|
|
|
|
```tsx
|
|
<ResizablePanelGroup direction="horizontal">
|
|
<ResizablePanel>One</ResizablePanel>
|
|
<ResizableHandle />
|
|
<ResizablePanel>Two</ResizablePanel>
|
|
</ResizablePanelGroup>
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Vertical
|
|
|
|
Use the `direction` prop to set the direction of the resizable panels.
|
|
|
|
<ComponentPreview name="resizable-vertical" />
|
|
|
|
```tsx showLineNumbers {9}
|
|
import {
|
|
ResizableHandle,
|
|
ResizablePanel,
|
|
ResizablePanelGroup,
|
|
} from "@/components/ui/resizable"
|
|
|
|
export default function Example() {
|
|
return (
|
|
<ResizablePanelGroup direction="vertical">
|
|
<ResizablePanel>One</ResizablePanel>
|
|
<ResizableHandle />
|
|
<ResizablePanel>Two</ResizablePanel>
|
|
</ResizablePanelGroup>
|
|
)
|
|
}
|
|
```
|
|
|
|
### Handle
|
|
|
|
You can set or hide the handle by using the `withHandle` prop on the `ResizableHandle` component.
|
|
|
|
<ComponentPreview name="resizable-handle" />
|
|
|
|
```tsx showLineNumbers {11}
|
|
import {
|
|
ResizableHandle,
|
|
ResizablePanel,
|
|
ResizablePanelGroup,
|
|
} from "@/components/ui/resizable"
|
|
|
|
export default function Example() {
|
|
return (
|
|
<ResizablePanelGroup direction="vertical">
|
|
<ResizablePanel>One</ResizablePanel>
|
|
<ResizableHandle withHandle />
|
|
<ResizablePanel>Two</ResizablePanel>
|
|
</ResizablePanelGroup>
|
|
)
|
|
}
|
|
```
|