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

Resizable.Root

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`variant`	`"border"`	`"border" \| "plain" \| "spacer"` The variant of the component.
`controlRef`	-	`RefObject<ResizableGroupControl \| null>` Ref of the resizable item callback.
`disabled`	-	`boolean` If `true`, the resizable trigger will be disabled.
`groupProps`	-	`ResizableGroupProps` Props for resizable component.
`keyboardStep`	`10`	`number` Unit to resize by keyboard operation.
`onLayout`	-	`PanelGroupOnLayout` The callback invoked when resizable items are resized.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the resizable.
`rootRef`	-	`ForwardedRef<HTMLDivElement>` Ref for resizable root element.
`storage`	-	`PanelGroupStorage` A callback that gets and sets a value in custom storage.
`storageKey`	-	`string` Key of value saved in storage. By default, it is saved to `local storage`.

Resizable.Item

Prop	デフォルト	型 / 説明
`as`	-	`keyof HTMLElementTagNameMap` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`collapsedSize`	-	`number` The collapsed size of the resizable item.
`collapsible`	`false`	`boolean` If `true`, the resizable item can be collapsed.
`controlRef`	-	`RefObject<null \| ResizableItemControl>` Ref of the resizable item callback.
`defaultSize`	-	`number` The initial size of the resizable item.
`maxSize`	-	`number` The maximum allowed value of the resizable item.
`minSize`	-	`number` The minimum allowed value of the resizable item.
`onCollapse`	-	`() => void` The callback invoked when resizable item are collapsed.
`onExpand`	-	`() => void` The callback invoked when resizable item are expanded.
`onResize`	-	`(size: number, prevSize: number \| undefined) => void` The callback invoked when resizable item are resized.
`order`	-	`number` Order for the resizable item.

Resizable.Trigger

Prop	デフォルト	型 / 説明
`as`	-	`keyof HTMLElementTagNameMap` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`disabled`	`false`	`boolean` If `true`, the resizable trigger will be disabled.
`icon`	-	`ReactElement` The resizable trigger icon to use.
`iconProps`	-	`HTMLStyledProps` Props for resizable trigger icon component.
`onDragging`	-	`(dragging: boolean) => void` The callback invoked when resizable trigger are dragged.

アクセシビリティ

Resizableは、アクセシビリティに関してWAI-ARIA - Window Splitter Patternに従います。

キー	説明	状態
`ArrowRight`	`keyboardStep`の値に基づいて値を増加します。	`orientation="horizontal"`
`ArrowLeft`	`keyboardStep`の値に基づいて値を減少します。	`orientation="horizontal"`
`ArrowUp`	`keyboardStep`の値に基づいて値を増加します。	`orientation="vertical"`
`ArrowDown`	`keyboardStep`の値に基づいて値を減少します。	`orientation="vertical"`
`Enter`	折りたたみ前なら折りたたみ、折りたたみ後なら`minSize`まで戻します。	`collapsible="true"`
`Home`	`minSize`の値を設定します。	-
`End`	`maxSize`の値を設定します。	-

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`Resizable.Item`	`id`	`Resizable.Trigger`と関連付けるために使用する`id`。
`Resizable.Trigger`	`role="separator"`	セパレーターであることを示します。
	`aria-controls`	関連した`Resizable.Item`の`id`を設定します。
	`aria-orientation`	`orientation`の値に基づいて`"horizontal"`または`"vertical"`を設定します。デフォルトは`"horizontal"`です。
	`aria-valuemin`	`minSize`の値を設定します。デフォルトは`0`です。
	`aria-valuemax`	`maxSize`の値を設定します。デフォルトは`100`です。
	`aria-valuenow`	現在の値を設定します。