Resizable
Resizableは、キーボードのサポートを備えたサイズ変更可能なレイアウトコンポーネントです。
One
Two
<Resizable.Root h="md" borderWidth="1px">
<Resizable.Item as={Center}>One</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item as={Center}>Two</Resizable.Item>
</Resizable.Root>
使い方
import { Resizable } from "@yamada-ui/react"
import { Resizable } from "@/components/ui"
import { Resizable } from "@workspaces/ui"
<Resizable.Root>
<Resizable.Item />
<Resizable.Trigger />
</Resizable.Root>
バリアントを変更する
Border
Two
Spacer
Two
<VStack>
<For each={["border", "spacer"]}>
{(variant) => (
<Resizable.Root
key={variant}
variant={variant}
h="md"
borderWidth={variant === "border" ? "1px" : undefined}
>
<Resizable.Item
as={Center}
borderWidth={variant === "spacer" ? "1px" : undefined}
>
{toTitleCase(variant)}
</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item
as={Center}
borderWidth={variant === "spacer" ? "1px" : undefined}
>
Two
</Resizable.Item>
</Resizable.Root>
)}
</For>
</VStack>
カラースキームを変更する
One
Two
One
Two
<VStack>
<For each={["success", "warning"]}>
{(colorScheme) => (
<Resizable.Root
key={colorScheme}
variant="spacer"
colorScheme={colorScheme}
h="md"
>
<Resizable.Item as={Center} borderWidth="1px">
One
</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item as={Center} borderWidth="1px">
Two
</Resizable.Item>
</Resizable.Root>
)}
</For>
</VStack>
方向を変更する
方向を変更する場合は、orientationに"horizontal"または"vertical"を設定します。デフォルトでは、"horizontal"が設定されています。
One
Two
One
Two
<VStack>
<For each={["horizontal", "vertical"]}>
{(orientation) => (
<Resizable.Root
key={orientation}
orientation={orientation}
h="md"
borderWidth="1px"
>
<Resizable.Item as={Center}>One</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item as={Center}>Two</Resizable.Item>
</Resizable.Root>
)}
</For>
</VStack>
デフォルトサイズを使う
デフォルトサイズを使う場合は、Resizable.ItemのdefaultSizeに数値(割合)を設定します。
One
Two
<Resizable.Root h="md" borderWidth="1px">
<Resizable.Item as={Center} defaultSize={30}>
One
</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item as={Center}>Two</Resizable.Item>
</Resizable.Root>
最小・最大サイズを使う
最小・最大サイズを使う場合は、Resizable.ItemのminSizeとmaxSizeに数値(割合)を設定します。
One
Two
<Resizable.Root h="md" borderWidth="1px">
<Resizable.Item as={Center} minSize={30} maxSize={70}>
One
</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item as={Center}>Two</Resizable.Item>
</Resizable.Root>
キーボードステップを使う
キーボードステップを使う場合は、keyboardStepに数値(割合)を設定します。
One
Two
<Resizable.Root h="md" borderWidth="1px" keyboardStep={25}>
<Resizable.Item as={Center}>One</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item as={Center}>Two</Resizable.Item>
</Resizable.Root>
折りたたみを可能にする
折りたたみを可能にする場合は、collapsibleをtrueに設定します。
minSizeは折りたたむ前の数値を設定し、collapsedSizeは折りたたんだ状態の数値を設定します。
One
Two
One
Two
<VStack>
<Resizable.Root h="md" borderWidth="1px">
<Resizable.Item
as={Center}
collapsedSize={15}
collapsible
defaultSize={30}
minSize={30}
maxSize={50}
onCollapse={() => {
console.log("collapsed item")
}}
onExpand={() => {
console.log("expand item")
}}
>
One
</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item as={Center}>Two</Resizable.Item>
</Resizable.Root>
<Resizable.Root orientation="vertical" h="md" borderWidth="1px">
<Resizable.Item
as={Center}
collapsedSize={10}
collapsible
defaultSize={25}
minSize={25}
maxSize={30}
onCollapse={() => {
console.log("collapsed item")
}}
onExpand={() => {
console.log("expand item")
}}
>
One
</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item as={Center}>Two</Resizable.Item>
</Resizable.Root>
</VStack>
アイコンを追加する
アイコンを追加する場合は、Resizable.TriggerのiconにReactNodeを設定します。
One
Two
One
Two
<VStack>
<Resizable.Root h="md" borderWidth="1px">
<Resizable.Item as={Center}>One</Resizable.Item>
<Resizable.Trigger icon={<GripVerticalIcon />} />
<Resizable.Item as={Center}>Two</Resizable.Item>
</Resizable.Root>
<Resizable.Root variant="spacer" h="md" orientation="vertical">
<Resizable.Item as={Center} borderWidth="1px">
One
</Resizable.Item>
<Resizable.Trigger icon={<GripVerticalIcon />} />
<Resizable.Item as={Center} borderWidth="1px">
Two
</Resizable.Item>
</Resizable.Root>
</VStack>
ネストした構造
Left
Top
Bottom
Top
Left
Right
<VStack>
<Resizable.Root h="md" borderWidth="1px">
<Resizable.Item as={Center}>Left</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item>
<Resizable.Root orientation="vertical">
<Resizable.Item as={Center}>Top</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item as={Center}>Bottom</Resizable.Item>
</Resizable.Root>
</Resizable.Item>
</Resizable.Root>
<Resizable.Root orientation="vertical" h="md" borderWidth="1px">
<Resizable.Item as={Center}>Top</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item>
<Resizable.Root>
<Resizable.Item as={Center}>Left</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item as={Center}>Right</Resizable.Item>
</Resizable.Root>
</Resizable.Item>
</Resizable.Root>
</VStack>
無効にする
無効にする場合は、disabledをtrueに設定します。
One
Two
Three
<Resizable.Root disabled h="md" borderWidth="1px">
<Resizable.Item as={Center}>One</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item as={Center}>Two</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item as={Center}>Three</Resizable.Item>
</Resizable.Root>
One
Two
Three
<Resizable.Root h="md" borderWidth="1px">
<Resizable.Item as={Center}>One</Resizable.Item>
<Resizable.Trigger disabled />
<Resizable.Item as={Center}>Two</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item as={Center}>Three</Resizable.Item>
</Resizable.Root>
リサイズイベントをハンドルする
リサイズイベントをハンドルする場合は、onResizeを使用します。onResizeは、変更したサイズと前回のサイズを提供します。
One
Two
<Resizable.Root h="md" borderWidth="1px">
<Resizable.Item
as={Center}
onResize={(size, prevSize) => {
console.log("resized", size, prevSize)
}}
>
One
</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item as={Center}>Two</Resizable.Item>
</Resizable.Root>
ローカルストレージに値を保存する
ローカルストレージに値を保存する場合は、storageKeyにローカルストレージに保存するキーを設定します。
ローカルストレージなどに値を保存する場合は、保存された各値と
Resizable.Itemを関連付けするためにResizable.Itemにidを設定する必要があります。もし、
Resizable.Itemを動的にマウントさせる場合は、orderに数値を設定してアイテムの並び順を固定化する必要があります。One
Two
Left
Middle
Right
const [showLeft, showLeftControls] = useBoolean(true)
const [showRight, showRightControls] = useBoolean(true)
return (
<VStack>
<Resizable.Root h="md" borderWidth="1px" storageKey="persistence">
<Resizable.Item as={Center} id="one">
One
</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item as={Center} id="two">
Two
</Resizable.Item>
</Resizable.Root>
<Wrap gap="md">
<Button onClick={showLeftControls.toggle}>
{showLeft ? "Hidden" : "Show"} Left
</Button>
<Button onClick={showRightControls.toggle}>
{showRight ? "Hidden" : "Show"} Right
</Button>
</Wrap>
<Resizable.Root h="md" borderWidth="1px" storageKey="conditional">
{showLeft ? (
<>
<Resizable.Item as={Center} id="left" minSize={10} order={1}>
Left
</Resizable.Item>
<Resizable.Trigger />
</>
) : null}
<Resizable.Item as={Center} id="middle" minSize={10} order={2}>
Middle
</Resizable.Item>
{showRight ? (
<>
<Resizable.Trigger />
<Resizable.Item as={Center} id="right" minSize={10} order={3}>
Right
</Resizable.Item>
</>
) : null}
</Resizable.Root>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。Cookieに値を保存する
cookiesに値を保存する場合は、storageにgetItemとsetItemを設定します。
Next.jsなどのサーバー側でレンダリングされるサイトに有効なアプローチです。
One
Two
const storage = useMemo<Resizable.Storage>(
() => ({
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.Root
h="md"
borderWidth="1px"
storageKey="persistence"
storage={storage}
>
<Resizable.Item as={Center} id="one">
One
</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item as={Center} id="two">
Two
</Resizable.Item>
</Resizable.Root>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。制御する
One
Two
const controlRef = useRef<Resizable.ItemControl>(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.Root h="md" borderWidth="1px">
<Resizable.Item
as={Center}
controlRef={controlRef}
collapsible
collapsedSize={15}
minSize={30}
maxSize={50}
>
One
</Resizable.Item>
<Resizable.Trigger />
<Resizable.Item as={Center}>Two</Resizable.Item>
</Resizable.Root>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。Props
アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。