Урок 12. Домашнее задание: страница настроек

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

⚡ Кратко

Собрать интерактивный блок настроек: переключатели, выбор варианта карточками, аккордеон и строки списка с действиями — полностью на вариантах, без JavaScript.

Задание

В проекте курса сделайте страницу «Настройки»:

  • три переключателя (на чекбоксах) с подписями, меняющими цвет при включении;
  • выбор темы карточками: три варианта, выбранный подсвечен рамкой и галочкой;
  • секция «Расширенные настройки» на теге details со стрелкой, поворачивающейся при раскрытии;
  • список подключённых устройств: при наведении и фокусе появляется кнопка «Отключить»;
  • у каждого интерактивного элемента виден фокус с клавиатуры.

Подготовка окружения

cd tailwind-course
npm run dev

Пошаговое решение

Шаг 1. Переключатель

Разметка: label → скрытый input.peer.sr-only → «дорожка» с peer-checked:bg-emerald-500 → «шарик» с peer-checked:translate-x-5. Не забудьте peer-focus-visible:ring-2, иначе с клавиатуры переключатель будет невидим.

Шаг 2. Выбор темы

Три label с радиокнопками и has-checked: для подсветки. Радиокнопки скрывайте через sr-only, а не hidden.

Шаг 3. Аккордеон

details.group + summary. Стрелка — group-open:rotate-180. Уберите стандартный маркер классом list-none.

Шаг 4. Список устройств

group на строке, кнопка с opacity-0 group-hover:opacity-100 focus-visible:opacity-100.

Как проверить

  • Пройдите страницу только клавишей Tab: все элементы достижимы, фокус виден.
  • Переключатели работают без JavaScript и переключаются пробелом.
  • Выбранная тема отмечена не только цветом.
  • Кнопка «Отключить» доступна и с клавиатуры, а не только по наведению.

Ориентир

Расширенные настройки ▾

Здесь могут быть параметры для опытных пользователей.

<div class="max-w-md space-y-4 rounded-xl border border-slate-200 bg-white p-4">
  <label class="flex cursor-pointer items-center justify-between gap-3">
    <span class="text-sm text-slate-700">Email-уведомления</span>
    <input type="checkbox" class="peer sr-only" checked>
    <span class="relative h-6 w-11 shrink-0 rounded-full bg-slate-300 transition-colors peer-checked:bg-emerald-500 peer-focus-visible:ring-2 peer-focus-visible:ring-emerald-500/40">
      <span class="absolute top-0.5 left-0.5 size-5 rounded-full bg-white transition-transform peer-checked:translate-x-5"></span>
    </span>
  </label>
  <div class="grid grid-cols-3 gap-2">
    <label class="cursor-pointer rounded-lg border border-slate-200 p-3 text-center text-xs has-checked:border-sky-500 has-checked:bg-sky-50">
      <input type="radio" name="theme-demo" class="sr-only" checked>Светлая
    </label>
    <label class="cursor-pointer rounded-lg border border-slate-200 p-3 text-center text-xs has-checked:border-sky-500 has-checked:bg-sky-50">
      <input type="radio" name="theme-demo" class="sr-only">Тёмная
    </label>
    <label class="cursor-pointer rounded-lg border border-slate-200 p-3 text-center text-xs has-checked:border-sky-500 has-checked:bg-sky-50">
      <input type="radio" name="theme-demo" class="sr-only">Системная
    </label>
  </div>
  <details class="group rounded-lg border border-slate-200 p-3">
    <summary class="flex cursor-pointer list-none items-center justify-between text-sm font-medium text-slate-900">
      Расширенные настройки
      <span class="text-slate-400 transition-transform group-open:rotate-180">▾</span>
    </summary>
    <p class="mt-2 text-xs text-slate-600">Здесь могут быть параметры для опытных пользователей.</p>
  </details>
</div>