DropdownMenu
Меню действий: пункты, группы, флажки, радио и подменю.
Живой код — редактируйте
<DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="outline" size="icon" aria-label="Действия"> <MoreFillIcon /> </Button> </DropdownMenuTrigger> <DropdownMenuContent className="w-56"> <DropdownMenuLabel>Проект</DropdownMenuLabel> <DropdownMenuItem> <Settings3LineIcon /> Настройки{' '} <DropdownMenuShortcut>⌘,</DropdownMenuShortcut> </DropdownMenuItem> <DropdownMenuItem> <FileCopyLineIcon /> Скопировать ключ </DropdownMenuItem> <DropdownMenuSub> <DropdownMenuSubTrigger>Экспорт</DropdownMenuSubTrigger> <DropdownMenuSubContent> <DropdownMenuItem>Excel</DropdownMenuItem> <DropdownMenuItem>CSV</DropdownMenuItem> </DropdownMenuSubContent> </DropdownMenuSub> <DropdownMenuSeparator /> <DropdownMenuCheckboxItem checked>Показывать UTM</DropdownMenuCheckboxItem> <DropdownMenuSeparator /> <DropdownMenuItem variant="destructive"> <DeleteBinLineIcon /> Удалить проект </DropdownMenuItem> </DropdownMenuContent> </DropdownMenu>
Радио-группа
Живой код — редактируйте
function Example() { const [sort, setSort] = useState('date'); return ( <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="outline">Сортировка</Button> </DropdownMenuTrigger> <DropdownMenuContent> <DropdownMenuRadioGroup value={sort} onValueChange={setSort}> <DropdownMenuRadioItem value="date">По дате</DropdownMenuRadioItem> <DropdownMenuRadioItem value="score">По оценке</DropdownMenuRadioItem> </DropdownMenuRadioGroup> </DropdownMenuContent> </DropdownMenu> ); } render(<Example />);
Пропсы DropdownMenuItem
Prop
Type
Также принимает стандартные атрибуты HTMLAttributesMenuItemPropsMenuItemImplProps