Component / list / NEXOFRAME

SortableList

Mẫu chuẩn

Danh sách dọc đổi thứ tự bằng tay cầm. Ứng dụng không import dnd-kit.

Chỉ kéo bằng tay cầmPhím cách và mũi tênHai danh sách không trộn nhau

Playground

Tóm tắt

Chi tiết

Tổ chức

Tổng quan

Khi nào sử dụng

Nên dùng

Đổi chỗ các khối trên một cột hồ sơ, hoặc các trường trong một khối. Mỗi danh sách một ngữ cảnh riêng.

Tránh dùng

Bảng sắp theo cột thì dùng DataTable. Kéo tự do trên canvas thì không dùng composite này.

Anatomy

Tay cầm là nút 32px, icon DragDropVertical 16px, nét 3px. Chỉ nút đó bắt đầu kéo. Di chuyển dưới 6px vẫn là click, nên nút mở khối bên cạnh vẫn bấm được. Hàng đang kéo dùng surface-raised, shadow overlay, và mờ 40%.

Bàn phím

Tiêu điểm vào tay cầm. Phím cách để cầm. Mũi tên để đổi chỗ. Phím cách để thả. Escape để hủy. Vùng đọc màn hình đọc tên từ getLabel.

Design tokens

Không token mới. Nút cầm dùng ghost-hover và focus ring. Hàng đang kéo dùng surface-raised và shadow-overlay.

API & triển khai

Prop	Mặc định	Quy ước
ids	bắt buộc	Thứ tự hiện tại
onReorder	bắt buộc	Host lưu mảng mới
label	bắt buộc	Tên của danh sách
getLabel	id	Tên đọc cho từng mục
SortableItem children	bắt buộc	(handle) => node. Đặt handle ngoài nút khác