Resizable
Resizable
is accessible resizable panel groups and layouts with keyboard support.
Import
import {Resizable,ResizableItem,ResizableTrigger,ResizableTriggerIcon,} from "@yamada-ui/react"
Resizable
: A wrapper component that controls child elements (ResizableItem
).ResizableItem
: A size-adjustable component.ResizableTrigger
: A component that separatesResizableItem
.ResizableTriggerIcon
: A component for the icon used inResizableTrigger
.
Usage
Editable example
<Resizable h="md" rounded="md" borderWidth="1px"> <ResizableItem as={Center}>One</ResizableItem> <ResizableTrigger /> <ResizableItem as={Center}>Two</ResizableItem> </Resizable>
Change Variants
Editable example
<VStack> <Resizable h="md" rounded="md" borderWidth="1px"> <ResizableItem as={Center}>One</ResizableItem> <ResizableTrigger /> <ResizableItem as={Center}>Two</ResizableItem> </Resizable> <Resizable variant="spacer" h="md"> <ResizableItem as={Center} rounded="md" borderWidth="1px"> One </ResizableItem> <ResizableTrigger /> <ResizableItem as={Center} rounded="md" borderWidth="1px"> Two </ResizableItem> </Resizable> </VStack>
Change Color Scheme
Editable example
<VStack> <Resizable variant="spacer" colorScheme="primary" h="md"> <ResizableItem as={Center} rounded="md" borderWidth="1px"> One </ResizableItem> <ResizableTrigger /> <ResizableItem as={Center} rounded="md" borderWidth="1px"> Two </ResizableItem> </Resizable> <Resizable variant="spacer" colorScheme="red" h="md"> <ResizableItem as={Center} rounded="md" borderWidth="1px"> One </ResizableItem> <ResizableTrigger /> <ResizableItem as={Center} rounded="md" borderWidth="1px"> Two </ResizableItem> </Resizable> </VStack>
Change Direction
To change the direction, set direction
to either horizontal
or vertical
. By default, horizontal
is set.
Editable example
<VStack> <Resizable direction="horizontal" h="md" rounded="md" borderWidth="1px"> <ResizableItem as={Center}>One</ResizableItem> <ResizableTrigger /> <ResizableItem as={Center}>Two</ResizableItem> </Resizable> <Resizable direction="vertical" h="md" rounded="md" borderWidth="1px"> <ResizableItem as={Center}>One</ResizableItem> <ResizableTrigger /> <ResizableItem as={Center}>Two</ResizableItem> </Resizable> </VStack>
Set Default Values
To set default values, assign a numerical value to defaultSize
.
Editable example
<Resizable h="md" rounded="md" borderWidth="1px"> <ResizableItem as={Center} defaultSize={30}> One </ResizableItem> <ResizableTrigger /> <ResizableItem as={Center}>Two</ResizableItem> </Resizable>
Set Minimum and Maximum Values
To set minimum and maximum values, assign a numerical value to minSize
or maxSize
.
Editable example
<Resizable h="md" rounded="md" borderWidth="1px"> <ResizableItem as={Center} minSize={30} maxSize={70}> One </ResizableItem> <ResizableTrigger /> <ResizableItem as={Center}>Two</ResizableItem> </Resizable>
Set Keyboard Step Values
To set keyboard step values, assign a numerical value to keyboardStep
.
Editable example
<Resizable h="md" rounded="md" borderWidth="1px" keyboardStep={25}> <ResizableItem as={Center}>One</ResizableItem> <ResizableTrigger /> <ResizableItem as={Center}>Two</ResizableItem> </Resizable>
Save Values
To save values, set a key for saving to local storage in storageKey
.
When saving values to local storage or similar, you must set an id
on ResizableItem
to associate each saved value with the ResizableItem
.
If you dynamically mount ResizableItem
, you need to set a numerical value to order
to determine the order of the items.
Editable example
const [showLeft, showLeftControls] = useBoolean(true) const [showRight, showRightControls] = useBoolean(true) return ( <VStack> <Resizable h="md" rounded="md" borderWidth="1px" storageKey="persistence"> <ResizableItem as={Center} id="one"> One </ResizableItem> <ResizableTrigger /> <ResizableItem as={Center} id="two"> Two </ResizableItem> </Resizable> <Wrap gap="md"> <Button onClick={showLeftControls.toggle}> {showLeft ? "Hidden" : "Show"} Left </Button> <Button onClick={showRightControls.toggle}> {showRight ? "Hidden" : "Show"} Right </Button> </Wrap> <Resizable h="md" rounded="md" borderWidth="1px" storageKey="conditional"> {showLeft ? ( <> <ResizableItem as={Center} id="left" minSize={10} order={1}> Left </ResizableItem> <ResizableTrigger /> </> ) : null} <ResizableItem as={Center} id="middle" minSize={10} order={2}> Middle </ResizableItem> {showRight ? ( <> <ResizableTrigger /> <ResizableItem as={Center} id="right" minSize={10} order={3}> Right </ResizableItem> </> ) : null} </Resizable> </> )
Save Values to cookies
To save values to cookies
, set getItem
and setItem
in storage
.
This is an effective approach for sites rendered on the server side, such as with Next.js.
Editable example
const storage: ResizableStorage = useMemo( () => ({ getItem: (key) => { const match = document.cookie.match(new RegExp(`(^| )${key}=([^;]+)`)) return match ? match[2] : null }, setItem: (key, value) => { document.cookie = `${key}=${value}; max-age=31536000; path=/` }, }), [], ) return ( <Resizable h="md" rounded="md" borderWidth="1px" storageKey="persistence" storage={storage} > <ResizableItem as={Center} id="one"> One </ResizableItem> <ResizableTrigger /> <ResizableItem as={Center} id="two"> Two </ResizableItem> </Resizable> )
Enable Collapsing
To enable collapsing, set collapsible
to true
.
Specify the minimum value before collapsing with minSize
, and the value when collapsed with collapsedSize
.
Editable example
<VStack> <Resizable h="md" rounded="md" borderWidth="1px"> <ResizableItem as={Center} collapsedSize={10} collapsible defaultSize={20} minSize={20} maxSize={30} onCollapse={() => { console.log("collapsed item") }} onExpand={() => { console.log("expand item") }} > One </ResizableItem> <ResizableTrigger /> <ResizableItem as={Center}>Two</ResizableItem> </Resizable> <Resizable direction="vertical" h="md" rounded="md" borderWidth="1px"> <ResizableItem as={Center} collapsedSize={10} collapsible defaultSize={25} minSize={25} maxSize={30} onCollapse={() => { console.log("collapsed item") }} onExpand={() => { console.log("expand item") }} > One </ResizableItem> <ResizableTrigger /> <ResizableItem as={Center}>Two</ResizableItem> </Resizable> </VStack>
Add Icons
To add icons, set a ReactElement
to icon
.
Editable example
<VStack> <Resizable h="md" rounded="md" borderWidth="1px"> <ResizableItem as={Center}>One</ResizableItem> <ResizableTrigger icon={<ResizableTriggerIcon />} /> <ResizableItem as={Center}>Two</ResizableItem> </Resizable> <Resizable direction="vertical" variant="spacer" h="md"> <ResizableItem as={Center} rounded="md" borderWidth="1px"> One </ResizableItem> <ResizableTrigger icon={<ResizableTriggerIcon />} /> <ResizableItem as={Center} rounded="md" borderWidth="1px"> Two </ResizableItem> </Resizable> </VStack>
Customize Icons
Editable example
<VStack> <Resizable h="md" rounded="md" borderWidth="1px"> <ResizableItem as={Center}>One</ResizableItem> <ResizableTrigger icon={<MoveHorizontal />} /> <ResizableItem as={Center}>Two</ResizableItem> </Resizable> <Resizable direction="vertical" h="md" rounded="md" borderWidth="1px"> <ResizableItem as={Center}>One</ResizableItem> <ResizableTrigger icon={<MoveHorizontal />} /> <ResizableItem as={Center}>Two</ResizableItem> </Resizable> </VStack>
Nested Structure
Editable example
<VStack> <Resizable h="md" rounded="md" borderWidth="1px"> <ResizableItem as={Center}>Left</ResizableItem> <ResizableTrigger /> <ResizableItem> <Resizable direction="vertical"> <ResizableItem as={Center}>Top</ResizableItem> <ResizableTrigger /> <ResizableItem as={Center}>Bottom</ResizableItem> </Resizable> </ResizableItem> </Resizable> <Resizable direction="vertical" h="md" rounded="md" borderWidth="1px"> <ResizableItem as={Center}>Top</ResizableItem> <ResizableTrigger /> <ResizableItem> <Resizable> <ResizableItem as={Center}>Left</ResizableItem> <ResizableTrigger /> <ResizableItem as={Center}>Right</ResizableItem> </Resizable> </ResizableItem> </Resizable> </VStack>
Disable
To disable, set isDisabled
to true
. You can also disable individually by setting it on ResizableTrigger
.
Editable example
<VStack> <Resizable isDisabled h="md" rounded="md" borderWidth="1px"> <ResizableItem as={Center}>One</ResizableItem> <ResizableTrigger /> <ResizableItem as={Center}>Two</ResizableItem> <ResizableTrigger /> <ResizableItem as={Center}>Three</ResizableItem> </Resizable> <Resizable h="md" rounded="md" borderWidth="1px"> <ResizableItem as={Center}>One</ResizableItem> <ResizableTrigger isDisabled /> <ResizableItem as={Center}>Two</ResizableItem> <ResizableTrigger /> <ResizableItem as={Center}>Three</ResizableItem> </Resizable> </VStack>
Handle Resize Events
If you want to handle resize events, use onResize
. onResize
provides the changed size and the previous size.
Editable example
<Resizable h="md" rounded="md" borderWidth="1px"> <ResizableItem as={Center} onResize={(size, prevSize) => { console.log("resized", size, prevSize) }} > One </ResizableItem> <ResizableTrigger /> <ResizableItem as={Center}>Two</ResizableItem> </Resizable>
Control
Editable example
const controlRef = useRef<ResizableItemControl>(null) return ( <VStack> <Wrap gap="md"> <Button onClick={() => { if (controlRef.current) controlRef.current.collapse() }} > Collapse "one" </Button> <Button onClick={() => { if (controlRef.current) controlRef.current.expand() }} > Expand "one" </Button> <Button onClick={() => { if (controlRef.current) controlRef.current.resize(30) }} > Resize "one" to 30 </Button> <Button onClick={() => { if (controlRef.current) controlRef.current.resize(50) }} > Resize "one" to 50 </Button> </Wrap> <Resizable h="md" rounded="md" borderWidth="1px"> <ResizableItem as={Center} controlRef={controlRef} collapsible collapsedSize={15} minSize={30} maxSize={50} > One </ResizableItem> <ResizableTrigger /> <ResizableItem as={Center}>Two</ResizableItem> </Resizable> </VStack> )
Edit this page on GitHub