Урок 16. Задания
⚡ Кратко
Два аналитических задания, одно практическое и четыре вопроса.
Задания
Задание 1. Выбор подхода
Для каждой ситуации решите, что уместнее — готовая библиотека компонентов или shadcn/ui, и объясните почему:
- (а) внутренняя админка на 30 экранов, команда из двух бэкендеров;
- (б) продуктовый интерфейс с собственным дизайн-макетом и дизайнером в команде;
- (в) прототип на два дня для демонстрации инвестору;
- (г) публичная дизайн-система компании на пять продуктов.
Задание 2. Найти исходник
Откройте документацию shadcn/ui, выберите компонент Switch
и ответьте: какой примитив он использует, какие варианты предусмотрены
и какие data-slot есть у его частей.
Задание 3. Проверка доступности
Возьмите любой компонент-оверлей в документации и пройдите его только клавиатурой. Запишите, что происходит: куда попадает фокус при открытии, что делает Esc, куда возвращается фокус после закрытия.
Проверка понимания
Выберите один вариант ответа — правильный подсветится после клика.
Вопрос 1
Что происходит при выполнении npx shadcn add button?
Вопрос 2
Кто отвечает за доступность компонентов shadcn/ui?
Вопрос 3
В чём главный минус подхода «код в вашем проекте»?
Вопрос 4
Чем render в актуальных версиях заменил старый asChild?