Урок 21. Справочник: части, состояния, анимации

📁 Раздел: shadcn/ui ⏱️ Время изучения: ~55 мин 🎯 Сложность: Продвинутая

⚡ Кратко

Части оверлеев, состояния data-open/data-closed и классы анимаций из tw-animate-css.

Установка

npx shadcn@latest add dialog sheet dropdown-menu tabs popover tooltip sonner

Части компонентов

Компонент	Части
`Dialog`	`DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogFooter`, `DialogClose`
`Sheet`	те же части плюс сторона появления
`DropdownMenu`	`DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuSeparator`, `DropdownMenuLabel`, `DropdownMenuCheckboxItem`
`Tabs`	`TabsList`, `TabsTrigger`, `TabsContent`
`Popover`	`PopoverTrigger`, `PopoverContent`
`Tooltip`	`TooltipTrigger`, `TooltipContent`

Состояния

Атрибут	Когда	Класс
`data-open`	элемент открыт	`data-open:animate-in`
`data-closed`	элемент закрывается	`data-closed:animate-out`
`data-highlighted`	пункт меню под курсором или стрелкой	`data-highlighted:bg-muted`
`data-checked`	отмеченный пункт	`data-checked:font-medium`
`data-side`	сторона появления поповера	`data-[side=top]:slide-in-from-bottom-2`
`data-selected`	активная вкладка	`data-selected:bg-background`

⚠️ Проверить по документации: набор data-атрибутов зависит от примитива. У Base UI это data-open, у Radix — data-[state=open]. Смотрите исходник компонента в своём проекте.

Классы анимаций (tw-animate-css)

Класс	Эффект
`animate-in` / `animate-out`	базовый вход и выход
`fade-in-0` / `fade-out-0`	прозрачность
`zoom-in-95` / `zoom-out-95`	масштаб
`slide-in-from-top-2`	выезд сверху
`slide-in-from-right`	выезд справа (панели)
`duration-100`	длительность

Полезные пропсы

Проп	Что делает
`open` / `onOpenChange`	управляемое состояние оверлея
`defaultOpen`	открыт при первой отрисовке
`modal`	блокировать ли страницу под окном
`render`	отрисовать триггер своим компонентом
`showCloseButton`	показывать ли крестик в диалоге

Клавиатура

Клавиша	Диалог	Меню	Вкладки
`Esc`	закрыть	закрыть	—
`Tab`	внутри окна по кругу	закрыть и перейти дальше	к панели
Стрелки	—	переход между пунктами	переключение вкладок
`Enter`	подтвердить	выбрать пункт	активировать
Буква	—	переход к пункту на эту букву	—