KvalityUI

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

On this page