Resizable

Resizableは、キーボードのサポートを備えたサイズ変更可能なレイアウトコンポーネントです。

インポート

import {
  Resizable,
  ResizableItem,
  ResizableTrigger,
  ResizableTriggerIcon,
} from "@yamada-ui/react"

Copied!

Resizable: 子要素(ResizableItem)を制御するラッパーコンポーネントです。
ResizableItem: サイズ変更可能なコンポーネントです。
ResizableTrigger: ResizableItemを区切るコンポーネントです。
ResizableTriggerIcon: ResizableTriggerで使用されるアイコンのコンポーネントです。

使い方

編集可能な例

<Resizable h="md" rounded="md" borderWidth="1px">
  <ResizableItem as={Center}>One</ResizableItem>

  <ResizableTrigger />

  <ResizableItem as={Center}>Two</ResizableItem>
</Resizable>

Copied!

バリアントを変更する

編集可能な例

<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>

Copied!

カラースキーマを変更する

編集可能な例

<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>

Copied!

方向を変更する

方向を変更する場合は、directionにhorizontalまたはverticalを設定します。デフォルトでは、horizontalが設定されています。

編集可能な例

<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>

Copied!

デフォルトの値を設定する

デフォルトの値を設定するは、defaultSizeに数値を設定します。

編集可能な例

<Resizable h="md" rounded="md" borderWidth="1px">
  <ResizableItem as={Center} defaultSize={30}>
    One
  </ResizableItem>

  <ResizableTrigger />

  <ResizableItem as={Center}>Two</ResizableItem>
</Resizable>

Copied!

最小値と最大値を設定する

最小値と最大値を設定する場合は、minSizeまたはmaxSizeに数値を設定します。

編集可能な例

<Resizable h="md" rounded="md" borderWidth="1px">
  <ResizableItem as={Center} minSize={30} maxSize={70}>
    One
  </ResizableItem>

  <ResizableTrigger />

  <ResizableItem as={Center}>Two</ResizableItem>
</Resizable>

Copied!

キーボードのステップ値を設定する

キーボードのステップ値を設定する場合は、keyboardStepに数値を設定します。

編集可能な例

<Resizable h="md" rounded="md" borderWidth="1px" keyboardStep={25}>
  <ResizableItem as={Center}>One</ResizableItem>

  <ResizableTrigger />

  <ResizableItem as={Center}>Two</ResizableItem>
</Resizable>

Copied!

値を保存する

値を保存する場合は、storageKeyにローカルストレージに保存するキーを設定します。

ローカルストレージなどに値を保存する場合は、保存された各値とResizableItemを関連付けするためにResizableItemにidを設定する必要があります。

もし、ResizableItemを動的にマウントさせる場合は、orderに数値を設定してアイテムの並び順を固定化する必要があります。

編集可能な例

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>
  </>
)

Copied!

`cookies`に値を保存する

cookiesに値を保存する場合は、storageにgetItemとsetItemを設定します。

Next.jsなどのサーバー側でレンダリングされるサイトに有効なアプローチです。

編集可能な例

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>
)

Copied!

折りたたみを可能にする

折りたたみを可能にする場合は、collapsibleをtrueに設定します。

minSizeは折りたたみ前の最小値を指定し、collapsedSizeは折りたたんだ状態の数値を指定します。

編集可能な例

<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>

Copied!

アイコンを追加する

アイコンを追加する場合は、iconにReactElementを設定します。

編集可能な例

<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>

Copied!

アイコンをカスタマイズする

編集可能な例

<VStack>
  <Resizable h="md" rounded="md" borderWidth="1px">
    <ResizableItem as={Center}>One</ResizableItem>

    <ResizableTrigger icon={<MoveHorizontalIcon />} />

    <ResizableItem as={Center}>Two</ResizableItem>
  </Resizable>

  <Resizable direction="vertical" h="md" rounded="md" borderWidth="1px">
    <ResizableItem as={Center}>One</ResizableItem>

    <ResizableTrigger icon={<MoveHorizontalIcon />} />

    <ResizableItem as={Center}>Two</ResizableItem>
  </Resizable>
</VStack>

Copied!

ネストした構造

編集可能な例

<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>

Copied!

無効化する

無効化する場合は、isDisabledをtrueに設定します。また、ResizableTriggerに設定することで個別に無効化することができます。

編集可能な例

<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>

Copied!

リサイズイベントをハンドルする

リサイズイベントをハンドルしたい場合は、onResizeを使用しています。onResizeは、変更したサイズと前回のサイズを提供します。

編集可能な例

<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>

Copied!

制御する

編集可能な例

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>
)

Copied!

GitHubでこのページを編集する

前Reorder 次Dockable

Resizable

使い方

バリアントを変更する

カラースキーマを変更する

方向を変更する

デフォルトの値を設定する

最小値と最大値を設定する

キーボードのステップ値を設定する

値を保存する

cookiesに値を保存する

折りたたみを可能にする

アイコンを追加する

アイコンをカスタマイズする

ネストした構造

無効化する

リサイズイベントをハンドルする

制御する

`cookies`に値を保存する