القائمة القابلة للسحب

قائمة من العناصر يمكن إعادة ترتيبها بالسحب والإفلات.

Loading demo: draggable-list-real-world

التثبيت

npx sdaia-ui@latest add draggable-list

import { DraggableList } from "@/components/ui/draggable-list"

<DraggableList />

قائمة من العناصر يمكن إعادة ترتيبها بالسحب.

Loading demo: draggable-list-default

خصائص مكوّن DraggableItem.

Prop	Type	Default	Required
state	'default' \| 'focused' \| 'disabled'	'default'	optional
disabled	boolean	false	optional
dir	'ltr' \| 'rtl'	-	optional
rtl	boolean	deprecated	optional
showDragHandle	boolean	true	optional
leadingIcon	ReactNode	-	optional
checkbox	boolean	false	optional
checked	boolean	false	optional
indeterminate	boolean	false	optional
onCheckedChange	(checked: boolean) => void	-	optional
avatarSrc	string	-	optional
avatarAlt	string	-	optional
startLabel	ReactNode	"Option 1"	optional
startSecondary	ReactNode	-	optional
startDescription	ReactNode	"Description text"	optional
endLabel	ReactNode	-	optional
endSecondary	ReactNode	-	optional
endDescription	ReactNode	-	optional
tagSlot	ReactNode	-	optional
buttonSlot	ReactNode	-	optional
trailingIcon	ReactNode	-	optional
statusDot	boolean	true	optional