Reddot UI Library
Docs
Resizable
Resizable
Accessible resizable panel groups and layouts with keyboard support.
À propos
Le composant Resizable est construit par-dessus react-resizable-panels par bvaughn.
Installation
$npx shadcn@latest add https://reddot.dottools.xyz/r/resizable.json
Utilisation
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable"
export default function Example() {
return (
<ResizablePanelGroup direction="horizontal">
<ResizablePanel>One</ResizablePanel>
<ResizableHandle />
<ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>
)
}Exemples
Disposition verticale
Utilisez la prop direction pour définir l'orientation verticale des panneaux :
<ResizablePanelGroup direction="vertical">
<ResizablePanel>One</ResizablePanel>
<ResizableHandle />
<ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>Personnalisation du handle
Personnalisez la visibilité du handle en utilisant la prop withHandle :
<ResizablePanelGroup direction="horizontal">
<ResizablePanel>Sidebar</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel>Content</ResizablePanel>
</ResizablePanelGroup>API Reference
ResizablePanelGroup
Conteneur pour un groupe de panneaux redimensionnables.
| Prop | Type | Default | Description |
|---|---|---|---|
direction | "horizontal" | "vertical" | "horizontal" | La direction dans laquelle les panneaux sont disposés. |
className | string | - | Classes CSS additionnelles pour le style. |
ResizablePanel
Un panneau individuel dans le groupe.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultSize | number | - | Taille par défaut du panneau en pourcentage. |
minSize | number | - | Taille minimale du panneau en pourcentage. |
maxSize | number | - | Taille maximale du panneau en pourcentage. |
collapsible | boolean | false | Si le panneau peut être réduit. |
collapsedSize | number | - | Taille du panneau lorsqu'il est réduit. |
ResizableHandle
Handle de redimensionnement entre les panneaux.
| Prop | Type | Default | Description |
|---|---|---|---|
withHandle | boolean | false | Si afficher une icône de handle visible. |
className | string | - | Classes CSS additionnelles pour le style. |