Урок 16. Решения

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

⚡ Кратко

Разбор выбора подхода, где искать исходники и что именно проверять в доступности.

Решение задания 1

Ситуация	Рекомендация	Почему
(а) админка, два бэкендера	готовая библиотека	некому вести компоненты; важнее скорость и единообразие «из коробки»
(б) продукт со своим дизайном	shadcn/ui	макет всё равно не совпадёт с чужой темой; правки в исходнике дешевле борьбы с API
(в) прототип на два дня	любое, чем владеете	решает скорость; долгосрочная поддержка не нужна
(г) дизайн-система на пять продуктов	shadcn/ui как основа своего реестра	CLI умеет собирать собственный реестр — вы раздаёте компоненты продуктам тем же способом

Главный критерий: есть ли в команде тот, кто будет владеть интерфейсным кодом. Если да — shadcn/ui даёт больше свободы. Если нет — свобода превратится в пять разных кнопок.

Решение задания 2

Быстрее всего посмотреть исходник прямо из CLI, не открывая браузер:

npx shadcn@latest view switch      # содержимое элемента реестра
npx shadcn@latest add switch --dry-run   # что будет создано, без записи
npx shadcn@latest docs switch      # документация и примеры

Ожидаемые ответы: компонент строится на примитиве переключателя из Base UI; оформление — cva или прямые классы с состояниями data-checked; части помечены data-slot="switch" и data-slot="switch-thumb".

⚠️ Проверить по документации: конкретный набор слотов и вариантов зависит от версии реестра — сверьтесь с выводом view в вашем проекте.

Решение задания 3

Что должно происходить в корректном диалоге:

при открытии фокус переходит внутрь окна (обычно на первый интерактивный элемент);
Tab ходит по кругу внутри окна и не уходит на страницу под ним;
Esc закрывает окно;
после закрытия фокус возвращается на кнопку, которая его открыла;
страница под окном не прокручивается;
скринридер объявляет заголовок окна.

Все шесть пунктов даёт примитив. Если вы пишете оверлей сами — это и есть ваш список задач, и каждый пункт имеет краевые случаи.