Caroa UI

Sortable

縦に並んだ行を、取っ手のドラッグか上下キーで並べ替える一覧。

インポート

import { Sortable, SortableItem, SortableHandle } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { Sortable, SortableItem, SortableHandle } from '@caroainc/ui-components/sortable'

Composition

Sortable
└─ SortableItem+
   └─ SortableHandle

基本的な使い方

クレジットや手順のように、並び順そのものに意味がある行の一覧で使います。取っ手をつかんでドラッグすると、つかんだ行が指に付いて動き、ほかの行は空いた場所へ滑って寄ります。離すと行が収まる位置へ滑って止まり、そのとき初めてonValueChangeが呼ばれます（動かしている間は呼ばれません）。取っ手にフォーカスして上下キーを押すと1つずつ動き、移した位置を読み上げます。

Loading...
const [order, setOrder] = useState(['a', 'b', 'c'])

<Sortable aria-label="クレジット" value={order} onValueChange={setOrder} className="divide-y divide-border">
  {order.map((key, index) => (
    <SortableItem key={key} value={key} className="flex items-center gap-3 py-2">
      <SortableHandle aria-label={`${index + 1}行目を並べ替える（ドラッグ、または上下キー）`} />
      {rows[key].name}
    </SortableItem>
  ))}
</Sortable>
  • 行のvalueは、並べ替えても変わらない値にします（配列の位置を使わない）。入力欄のある行でも、並べ替えで入力中の内容が入れ替わりません。
  • 並べ替えは縦方向だけです。動きを減らす設定（prefers-reduced-motion）の利用者には、滑らせずに入れ替えます。
  • ドラッグ中の行にはdata-draggingが付き、既定で影が出ます。

Props

Sortable

PropTypeDefaultDescription
valuestring[]-並び順（各SortableItemのvalueの配列）
onValueChange(value: string[]) => void-並び順が変わったとき（ドロップ・上下キー）
disabledbooleanfalse並べ替えを無効にする
as'ol' | 'ul' | 'div''ol'一覧の要素
announce(position: number, total: number) => string-移したあとに読み上げる文。既定は「{n}番目に移しました」

SortableItem

PropTypeDefaultDescription
valuestring-この行の値（Sortableのvalueに含める）
as'li' | 'div'-行の要素。既定はli（Sortableのasがdivならdiv）

SortableHandle

PropTypeDefaultDescription
aria-labelstring-読み上げ用の名前（必須）。ドラッグと上下キーで動かせることを添える
childrenReactNode-中身。渡さなければ縦の点々のアイコン

Segmented Control

少数の選択肢から1つを選ぶボタンの列。選んでいる印が次の選択肢へ滑って移る。

Select

ドロップダウン選択コンポーネント。

On this page

インポートComposition基本的な使い方PropsSortableSortableItemSortableHandle