ReorderList

끌거나 키보드로 순서를 바꾸고 결과를 알림.

라이브러리 전용

개요

미리보기

예시 언어동작 줄이기

Press Space to grab, arrow keys to move, Space to drop, Esc to cancel. The up and down buttons move it too.

Confirm the review scopePinned5 min
Customer interview notes15 min
Onboarding guide draft20 min
Check the scanned dates10 min
Questions for next quarter10 min

label

buttons

예시

상태

기본 (고정 항목 포함)
Press Space to grab, arrow keys to move, Space to drop, Esc to cancel. The up and down buttons move it too.
Confirm the review scopePinned5 min
Customer interview notes15 min
Onboarding guide draft20 min
Check the scanned dates10 min
Questions for next quarter10 min
버튼 없음
Press Space to grab, arrow keys to move, Space to drop, Esc to cancel. The up and down buttons move it too.
Confirm the review scopePinned5 min
Customer interview notes15 min
Onboarding guide draft20 min
Check the scanned dates10 min
Questions for next quarter10 min
가장 긴 이름 (es)
Press Space to grab, arrow keys to move, Space to drop, Esc to cancel. The up and down buttons move it too.
Confirm the review scopePinned5 min
Customer interview notes15 min
Onboarding guide draft20 min
Check the scanned dates10 min
Questions for next quarter10 min

이렇게 · 이렇게 하지 않기

이렇게 끌기와 키보드(잡기·이동·놓기)를 모두 지원하고 위치 변화를 알린다.
이렇게 하지 않기 사용자가 정한 순서는 자동 정렬로 덮어쓰지 않는다.
이렇게 고정한 항목은 “고정됨”을 글자로 둔다.
이렇게 하지 않기 순위 번호나 “TOP” 배지로 중요도를 꾸미지 않는다. 번호는 위치일 뿐이다.
이렇게 21st 참고: Reorder List(ddoemonn — Space 잡기·화살표·Space 놓기·Esc 원래 순서, “2/4” 알림), Sortable List(ebnsina — “X 이동” 버튼 + aria-pressed, 200ms FLIP), Drag Item(ai2 — 손잡이·위/아래 변형). Draggable Priority List의 “TOP” 순위 배지와 Draggable List의 확대 등장은 버렸다.

토큰과 속성

이름	타입	기본값	설명
`label`	`string`	`회고 순서`	목록의 접근 이름.
`items`	`readonly ReorderItem[]`	—	{ id, label, meta?, pinned? }. 고정 항목은 움직이지 않고 다른 항목이 그 자리를 건너뛴다. 미리보기 표본 5개(첫 항목 고정).
`buttons?`	`boolean`	`true`	행마다 “위로”·“아래로” 버튼. 끌기 대신 쓰는 대체 수단(WCAG 2.5.7). Tab에는 걸리지 않는다(키보드는 잡기 손잡이).
`onReorder?: (ids: string[]) => void`	—	—	놓았을 때(키보드·끌기·버튼) 새 순서. 취소하면 호출되지 않는다.
`announce() — a11y/announce.ts`	—	—	LiveAnnouncer polite: “잡음, 5개 중 2번째” → “3번째로 옮김” → “놓음, 3번째” / “취소, 2번째로 돌아감”.
그 밖의 속성	—	—	id, aria-* 등 네이티브 div 속성은 바깥 래퍼로 전달된다. className·style·children은 받지 않는다.

개요

미리보기

예시 언어동작 줄이기

Press Space to grab, arrow keys to move, Space to drop, Esc to cancel. The up and down buttons move it too.

Confirm the review scopePinned5 min
Customer interview notes15 min
Onboarding guide draft20 min
Check the scanned dates10 min
Questions for next quarter10 min

label

buttons

예시

상태

기본 (고정 항목 포함)
Press Space to grab, arrow keys to move, Space to drop, Esc to cancel. The up and down buttons move it too.
Confirm the review scopePinned5 min
Customer interview notes15 min
Onboarding guide draft20 min
Check the scanned dates10 min
Questions for next quarter10 min
버튼 없음
Press Space to grab, arrow keys to move, Space to drop, Esc to cancel. The up and down buttons move it too.
Confirm the review scopePinned5 min
Customer interview notes15 min
Onboarding guide draft20 min
Check the scanned dates10 min
Questions for next quarter10 min
가장 긴 이름 (es)
Press Space to grab, arrow keys to move, Space to drop, Esc to cancel. The up and down buttons move it too.
Confirm the review scopePinned5 min
Customer interview notes15 min
Onboarding guide draft20 min
Check the scanned dates10 min
Questions for next quarter10 min

이렇게 · 이렇게 하지 않기

이렇게 끌기와 키보드(잡기·이동·놓기)를 모두 지원하고 위치 변화를 알린다.

이렇게 하지 않기 사용자가 정한 순서는 자동 정렬로 덮어쓰지 않는다.

이렇게 고정한 항목은 “고정됨”을 글자로 둔다.

이렇게 하지 않기 순위 번호나 “TOP” 배지로 중요도를 꾸미지 않는다. 번호는 위치일 뿐이다.

이렇게 21st 참고: Reorder List(ddoemonn — Space 잡기·화살표·Space 놓기·Esc 원래 순서, “2/4” 알림), Sortable List(ebnsina — “X 이동” 버튼 + aria-pressed, 200ms FLIP), Drag Item(ai2 — 손잡이·위/아래 변형). Draggable Priority List의 “TOP” 순위 배지와 Draggable List의 확대 등장은 버렸다.

토큰과 속성

이름	타입	기본값	설명
`label`	`string`	`회고 순서`	목록의 접근 이름.
`items`	`readonly ReorderItem[]`	—	{ id, label, meta?, pinned? }. 고정 항목은 움직이지 않고 다른 항목이 그 자리를 건너뛴다. 미리보기 표본 5개(첫 항목 고정).
`buttons?`	`boolean`	`true`	행마다 “위로”·“아래로” 버튼. 끌기 대신 쓰는 대체 수단(WCAG 2.5.7). Tab에는 걸리지 않는다(키보드는 잡기 손잡이).
`onReorder?: (ids: string[]) => void`	—	—	놓았을 때(키보드·끌기·버튼) 새 순서. 취소하면 호출되지 않는다.
`announce() — a11y/announce.ts`	—	—	LiveAnnouncer polite: “잡음, 5개 중 2번째” → “3번째로 옮김” → “놓음, 3번째” / “취소, 2번째로 돌아감”.
그 밖의 속성	—	—	id, aria-* 등 네이티브 div 속성은 바깥 래퍼로 전달된다. className·style·children은 받지 않는다.

개요

예시

상태

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기

개요

예시

상태

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기