Практика: этапы работы в адаптивной полосе
Последовательность этапов можно показать горизонтально при достаточной ширине и вертикально на узком экране. Порядок должен оставаться понятным без соединительных стрелок и цветовых кодов.
Назначение
Последовательность этапов можно показать горизонтально при достаточной ширине и вертикально на узком экране. Порядок должен оставаться понятным без соединительных стрелок и цветовых кодов.
Как это работает
Используйте ol, чтобы выразить последовательность. Grid меняет число колонок без перестановки элементов. В примере названия этапов описывают план; они не утверждают, что пользователь уже выполнил какое-либо действие.
Пример
<style>.step-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1rem;padding-inline-start:1.5rem}.step-strip li{padding:1rem;background:#e6f2ea}.step-strip p{margin:.5rem 0 0}</style>
<ol class="step-strip"><li><strong>Подготовка</strong><p>Соберите исходные файлы.</p></li><li><strong>Разработка</strong><p>Создайте учебную страницу.</p></li><li><strong>Проверка</strong><p>Проверьте ссылки и адаптивность.</p></li></ol>Что должно получиться
Номера и исходный порядок задают последовательность при любой раскладке. Каждый этап содержит короткое объяснение, которое не нужно получать наведением мыши.
Граница применения и частая ошибка
Не используйте order или обратное направление сетки для случайной перестановки смысловых этапов. Если компонент станет индикатором текущего шага, потребуется отдельное понятное обозначение состояния, например aria-current="step" у соответствующего элемента.
Самостоятельная проверка
Добавьте четвёртый этап, затем длинное название. Проверьте узкое окно и масштаб. Определите, является ли ваш компонент простым планом или навигацией по шагам: ссылки нужны только во втором случае.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.