Reorder

Reorderは、項目の順序をドラッグアンドドロップで変更できるコンポーネントです。

インポート

import { Reorder, ReorderItem, ReorderTrigger } from "@yamada-ui/react"

Copied!

Reorder: 子要素(ReorderItem)を制御するラッパーコンポーネントです。
ReorderItem: ドラッグアンドドロップ可能な項目のコンポーネントです。
ReorderTrigger: ドラッグアンドドロップ可能なアイコンを表示するコンポーネントです。

使い方

編集可能な例

<Reorder>
  <ReorderItem value="ギニュー">ギニュー</ReorderItem>
  <ReorderItem value="リクーム">リクーム</ReorderItem>
  <ReorderItem value="バータ">バータ</ReorderItem>
  <ReorderItem value="ジース">ジース</ReorderItem>
  <ReorderItem value="グルド">グルド</ReorderItem>
</Reorder>

Copied!

または、itemsを設定することでReorderItemを省略することができます。

編集可能な例

const items = useMemo<ReorderGenerateItem[]>(
  () => [
    { label: "ギニュー", value: "ギニュー" },
    { label: "リクーム", value: "リクーム" },
    { label: "バータ", value: "バータ" },
    { label: "ジース", value: "ジース" },
    { label: "グルド", value: "グルド" },
  ],
  [],
)

return <Reorder items={items} />

Copied!

バリアントを変更する

編集可能な例

<VStack divider={<Divider />}>
  <Reorder variant="outline">
    <ReorderItem value="ギニュー">ギニュー</ReorderItem>
    <ReorderItem value="リクーム">リクーム</ReorderItem>
    <ReorderItem value="バータ">バータ</ReorderItem>
    <ReorderItem value="ジース">ジース</ReorderItem>
    <ReorderItem value="グルド">グルド</ReorderItem>
  </Reorder>

  <Reorder variant="elevated">
    <ReorderItem value="ギニュー">ギニュー</ReorderItem>
    <ReorderItem value="リクーム">リクーム</ReorderItem>
    <ReorderItem value="バータ">バータ</ReorderItem>
    <ReorderItem value="ジース">ジース</ReorderItem>
    <ReorderItem value="グルド">グルド</ReorderItem>
  </Reorder>

  <Reorder variant="unstyled">
    <ReorderItem value="ギニュー">ギニュー</ReorderItem>
    <ReorderItem value="リクーム">リクーム</ReorderItem>
    <ReorderItem value="バータ">バータ</ReorderItem>
    <ReorderItem value="ジース">ジース</ReorderItem>
    <ReorderItem value="グルド">グルド</ReorderItem>
  </Reorder>
</VStack>

Copied!

サイズを変更する

編集可能な例

<VStack divider={<Divider />}>
  <Reorder size="sm">
    <ReorderItem value="ギニュー">ギニュー</ReorderItem>
    <ReorderItem value="リクーム">リクーム</ReorderItem>
    <ReorderItem value="バータ">バータ</ReorderItem>
    <ReorderItem value="ジース">ジース</ReorderItem>
    <ReorderItem value="グルド">グルド</ReorderItem>
  </Reorder>

  <Reorder size="md">
    <ReorderItem value="ギニュー">ギニュー</ReorderItem>
    <ReorderItem value="リクーム">リクーム</ReorderItem>
    <ReorderItem value="バータ">バータ</ReorderItem>
    <ReorderItem value="ジース">ジース</ReorderItem>
    <ReorderItem value="グルド">グルド</ReorderItem>
  </Reorder>

  <Reorder size="normal">
    <ReorderItem value="ギニュー">ギニュー</ReorderItem>
    <ReorderItem value="リクーム">リクーム</ReorderItem>
    <ReorderItem value="バータ">バータ</ReorderItem>
    <ReorderItem value="ジース">ジース</ReorderItem>
    <ReorderItem value="グルド">グルド</ReorderItem>
  </Reorder>

  <Reorder size="lg">
    <ReorderItem value="ギニュー">ギニュー</ReorderItem>
    <ReorderItem value="リクーム">リクーム</ReorderItem>
    <ReorderItem value="バータ">バータ</ReorderItem>
    <ReorderItem value="ジース">ジース</ReorderItem>
    <ReorderItem value="グルド">グルド</ReorderItem>
  </Reorder>
</VStack>

Copied!

方向を変更する

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

編集可能な例

<VStack divider={<Divider />}>
  <Reorder orientation="vertical">
    <ReorderItem value="ギニュー">ギニュー</ReorderItem>
    <ReorderItem value="リクーム">リクーム</ReorderItem>
    <ReorderItem value="バータ">バータ</ReorderItem>
    <ReorderItem value="ジース">ジース</ReorderItem>
    <ReorderItem value="グルド">グルド</ReorderItem>
  </Reorder>

  <Reorder orientation="horizontal">
    <ReorderItem value="ギニュー">ギニュー</ReorderItem>
    <ReorderItem value="リクーム">リクーム</ReorderItem>
    <ReorderItem value="バータ">バータ</ReorderItem>
    <ReorderItem value="ジース">ジース</ReorderItem>
    <ReorderItem value="グルド">グルド</ReorderItem>
  </Reorder>
</VStack>

Copied!

ドラッグアンドドロップ可能な領域を限定する

ドラッグアンドドロップ可能な領域を限定する場合は、ReorderTriggerを使用します。

編集可能な例

<Reorder>
  <ReorderItem value="孫悟空">
    <HStack>
      <ReorderTrigger />
      <Text>孫悟空</Text>
    </HStack>
  </ReorderItem>

  <ReorderItem value="ベジータ">
    <HStack>
      <ReorderTrigger>
        <Ghost />
      </ReorderTrigger>
      <Text>ベジータ</Text>
    </HStack>
  </ReorderItem>
</Reorder>

Copied!

変更のイベントをハンドルする

項目の順序が変更されたイベントをハンドルしたい場合は、onChangeを使用します。onChangeは、現在の順序を配列を提供します。

編集可能な例

<Reorder onChange={(values) => console.log(`changed '${values.join(`', '`)}'`)}>
  <ReorderItem value="ギニュー">ギニュー</ReorderItem>
  <ReorderItem value="リクーム">リクーム</ReorderItem>
  <ReorderItem value="バータ">バータ</ReorderItem>
  <ReorderItem value="ジース">ジース</ReorderItem>
  <ReorderItem value="グルド">グルド</ReorderItem>
</Reorder>

Copied!

完了のイベントをハンドルする

ユーザーのドラッグアンドドロップが終了し、項目の順序が完了されたイベントをハンドルしたい場合は、onCompleteChangeを使用します。onCompleteChangeは、完了した順序を配列を提供します。

編集可能な例

<Reorder
  onCompleteChange={(values) =>
    console.log(`completed '${values.join(`', '`)}'`)
  }
>
  <ReorderItem value="ギニュー">ギニュー</ReorderItem>
  <ReorderItem value="リクーム">リクーム</ReorderItem>
  <ReorderItem value="バータ">バータ</ReorderItem>
  <ReorderItem value="ジース">ジース</ReorderItem>
  <ReorderItem value="グルド">グルド</ReorderItem>
</Reorder>

Copied!

スクロール可能な領域で使用する

スクロールがある領域で使用する場合は、項目がオフセットを正しく測定できるようにlayoutScrollをtrueに設定します。

編集可能な例

<Reorder h="xs" overflowY="auto" layoutScroll>
  <ReorderItem value="ギニュー">ギニュー</ReorderItem>
  <ReorderItem value="リクーム">リクーム</ReorderItem>
  <ReorderItem value="バータ">バータ</ReorderItem>
  <ReorderItem value="ジース">ジース</ReorderItem>
  <ReorderItem value="グルド">グルド</ReorderItem>
</Reorder>

Copied!

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

前Carousel 次Resizable