القائمة المنسدلة

قائمة منسدلة يُشغّلها زر أو أيقونة أو صورة رمزية.

Loading demo: dropdown-real-world

التثبيت

npx sdaia-ui@latest add dropdown

import { Dropdown } from "@/components/ui/dropdown"

<Dropdown type="button" />

القائمة المنسدلة triggered by a standard button.

Loading demo: dropdown-button

القائمة المنسدلة triggered by an icon button.

Loading demo: dropdown-icon

القائمة المنسدلة triggered by a user avatar.

Loading demo: dropdown-avatar

القائمة المنسدلة menu aligned to the start, center, or end of the trigger.

Loading demo: dropdown-alignment

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

Prop	Type	Default	Required
type	'button' \| 'icon' \| 'avatar'	'button'	optional
alignment	'start' \| 'center' \| 'end'	'end'	optional
label	string	'Button'	optional
variant	'neutral' \| 'primary' \| 'secondary-solid' \| 'secondary-outline' \| 'subtle' \|...	'primary'	optional
size	'sm' \| 'md' \| 'lg'	'md'	optional
avatarSrc	string	-	optional
avatarAlt	string	-	optional
header	DropdownListHeaderProps	-	optional
items	DropdownItem[]	[]	optional
disabled	boolean	false	optional
open	boolean	-	optional
defaultOpen	boolean	false	optional
onOpenChange	(open: boolean) => void	-	optional
className	string	-	optional
placement	"top" \| "bottom"	"bottom"	optional
dir	"ltr" \| "rtl"	—	optional