Навигация
Навигация
Шесть компонентов, и первый вопрос к любому: это переход по адресу или выбор значения? Переход — навигация, вкладки, крошки, пейджер. Выбор — не отсюда: это сегментированный контрол или селект.
Сравнение стоит здесь, а не на страницах: «возьмите другое» — это утверждение о СОСЕДЯХ, и повторённое шесть раз оно расходится с ними по одной строке за правку.
Что выбрать
| Что нужно | Возьмите | Почему не соседа |
|---|---|---|
| Постоянный список разделов приложения | Навигацию в колонке оболочки | У вкладок другая работа и другое место на экране |
| Несколько видов одних и тех же данных, у каждого свой адрес | Вкладки | Навигация ведёт между разделами, вкладки — внутри одного |
| Путь до текущего экрана глубже второго уровня | Крошки | У крошек нет полноты, только путь: список разделов ими не заменить |
Список, разбитый на страницы с адресами ?page=3 |
Пейджер | В бесконечной ленте номер страницы ничего не значит |
| Процесс с известным числом этапов, который ведёт человек | Шаги мастера | У вкладок нет порядка и незавершённости |
| Инструменты, действующие на содержимое этой панели | Тулбар | Действия над экраном целиком — в шапке экрана |
Когда ни один не подходит
| Что нужно | Возьмите | Почему не отсюда |
|---|---|---|
| Выбор одного значения из равных | сегментированный контрол | Это ввод, а не переход: значение отправляется с формой |
| Раскрывающаяся иерархия объектов | дерево | У пункта навигации нет уровня и раскрытия |
| Список действий по клику | меню | Навигация ведёт на адрес, меню запускает действие |
| Поток без конца | догрузка по прокрутке | Номер страницы в бесконечной ленте не значит ничего |
| Живая лента событий | лог | В нём читают хвост, а не страницу №7 |
| Работа машины с раскрывающимся телом | шаг прогона | У него есть вывод, у шага мастера только подпись |
| Доля выполненного числом | мера | Полоса без имён этапов |
| Название экрана | шапка экрана | Крошки не заменяют заголовок |
Общее для всех шести
Переход — это <a>. Кнопка, ведущая на адрес, ломает средний клик,
«открыть в новой вкладке» и копирование ссылки. Единственное исключение —
настоящие вкладки с role="tablist", у которых своего адреса нет.
Текущее положение объявляется атрибутом, а не классом. aria-current="page"
у ссылки, aria-selected у настоящей вкладки. Класс красит, но не
произносится.
Порядок обхода совпадает с порядком в разметке. Визуальная перестановка
колонок без перестановки узлов ломает Tab — это относится ко всем шести
одинаково.
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument