Оверлеи
Оверлеи
Пять компонентов, и путают их постоянно. Различаются они по двум вопросам: забирает ли фокус и держат ли открытым.
| забирает фокус | держат открытым | ширина | |
|---|---|---|---|
| Модалка | да, фон погашен | нет, отвечают и закрывают | по содержимому |
| Шторка | да, фон погашен | да, пока смотрят | колонка сбоку |
| Поповер | нет | нет | по содержимому |
| Меню | нет | нет | по пунктам |
| Тултип | нет, и курсор в него не увести | нет | одна фраза |
Сравнение стоит здесь, а не на страницах: «возьмите другое» — это утверждение о СОСЕДЯХ, и повторённое пять раз оно расходится с ними по одной строке за правку.
Что выбрать
| Что нужно | Возьмите | Почему не соседа |
|---|---|---|
| Ответ, без которого дальше нельзя: подтвердить разрушительное действие | Модалку | Поповер не забирает фокус, и вопрос можно не заметить |
| Подробности объекта, которые смотрят, не теряя список из виду | Шторку | Модалка центрируется и отрывает от контекста |
| Список действий над объектом, вызванный кнопкой | Меню в поповере | У селекта есть значение и он отправляется с формой, у меню — нет |
| Подробности или форму сбоку, не блокируя работу | Поповер | Модалка гасит фон там, где хватило бы соседства |
| Пояснение к иконочной кнопке или сокращению | Тултип | Всё остальное требует нажатия |
Когда ни один не подходит
| Что нужно | Возьмите | Почему не отсюда |
|---|---|---|
| Сообщение без вопроса | баннер уровня страницы | Модалка требует нажатия там, где хватило бы прочтения |
| Постоянная панель, которую не закрывают | колонка оболочки | У шторки есть подложка, и фон под ней выключен |
| Два-три частых действия | группа кнопок на виду | Меню прячет то, что нажимают каждый раз |
| Выбор значения формы | селект | У меню нет значения и оно не отправляется |
| Текст, без которого нельзя обойтись | подпись в потоке или сноска | Тултип не открывается на сенсорном экране |
| Согласование в очереди агентов | блок согласования | Модалка вырывает из потока, где решение — часть ленты |
Общее для всех пяти
Обрезающий контейнер решает за вас. Внутри панели с
overflow: hidden тултип обрежется — там берут поповер: он живёт в верхнем
слое. Это единственный случай, когда выбор диктует не смысл, а раскладка.
Тултип не открывается пальцем. На сенсорном экране его нет вовсе, поэтому всё, что в нём написано, обязано быть необязательным.
Модалка выше тостов. Тост живёт в верхнем слое, но showModal() поднимает
диалог ещё выше: уведомление, пришедшее при открытой модалке, человек увидит
после её закрытия. Ограничение платформы, а не недосмотр.
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument