Как мы переосмыслили модальные окна для браузера
Все началось с того, что во время разработки мобильного кросс-платформенного приложения/PWA нам срочно понадобились touch-friendly модальные окна для построения интерфейсов. Мы начали искать готовые решения, совместимые с Vue.js. Ключевыми критериями поиска были: sheet-modal, высокая степень кастомизации, отсутствие привязки к конкретным UI-библиотекам и, конечно, удобство для touch-устройств.
После долгих поисков мы нашли только два подходящих решения: ionic sheet modal и framework 7 sheet modal. Однако их интеграция выявила ряд проблем.
Что такое Sheet Modal ?
Sheet Modal — это модальное окно, которое открывается снизу экрана и может изменять свой размер в зависимости от действий пользователя. Например, его можно растянуть или свернуть, перетаскивая специальный индикатор. Такой подход особенно популярен в мобильных интерфейсах, так как он интуитивно понятен и удобен для touch-устройств.
«Лист с возможностью изменения размера расширяется, когда пользователь прокручивает его содержимое или перетаскивает горизонтальный индикатор, который может отображаться на верхнем краю листа. Размер листов также может изменяться в соответствии с их фиксированным положением…» — портал Apple Developer.
Что не так с готовыми решениями?
После интеграции ionic и framework 7 sheet modal мы столкнулись с рядом недостатков:
- Примитивность: Оба решения предлагали базовый функционал, который не покрывал всех наших потребностей.
- Баги: Многочисленные ошибки в работе, особенно на разных устройствах и браузерах.
- Дерганые анимации: Анимации открытия и закрытия были нестабильными и не всегда плавными.
- Зависимость от UI kit: Оба решения были тесно связаны с собственными UI-библиотеками, что ограничивало их гибкость.
Эти проблемы заставили нас задуматься о создании собственного решения.
- Touch-friendly: Разработанный специально для мобильных и сенсорных устройств, RvSheet обеспечивает плавное и удобное взаимодействие.
Плавная анимация: Работает на базе WAAPI и предлагает одну из самых эффективных и плавных анимаций, доступных на сегодняшний день.
Независимость от фреймворков: Созданный на основе чистого JavaScript, RvSheet легко интегрируется с любым фреймворком по вашему выбору, от React до Angular, Vue или даже vanilla JS.
Легко настраиваемый: В нем есть все необходимое для удовлетворения ваших потребностей в настройке через пропсы.
Полный контроль: Обеспечивает полную гибкость в работе с версткой и стилями, позволяя создавать полностью индивидуальные пользовательские интерфейсы.
Поддержка виртуальной клавиатуры: Автоматически настраивает и перемещает лист при открытии виртуальной клавиатуры на мобильных устройствах, обеспечивая бесперебойную работу пользователя.
Легкий и эффективный: RvSheet, объем которого составляет всего 20 КБ, обеспечивает высокую производительность без ущерба для функциональности.
Zero dependencies: RvSheet не имеет зависимостей.
Мы ценим доступность
Мы в Reevo Design разрабатываем компоненты, совместимые с любой веб-библиотекой. RvSheet не исключение: она полностью контролируется разработчиком, начиная от стилей и заканчивая поведением. Это позволяет использовать её в проектах любого масштаба и сложности.
WAAPI
Мы, как исследователи, стараемся следовать современным стандартам, поэтому при выборе инструмента для браузерных анимаций выбор пал на WAAPI — мощный нативный инструмент анимаций без необходимости использовать CSS напрямую. Отличительной особенностью является то, что анимации обрабатываются в отдельном потоке за счет средств GPU. Следовательно, даже при высокой нагрузке на веб-страницу, элементы будут анимироваться плавно и без тормозов.
Как мы победили виртуальную клавиатуру
Одной из самых больших проблем оказалось адаптировать модальные окна под виртуальную клавиатуру мобильных устройств. Думаю, многие сталкивались с проблемой, когда при открытии виртуальной клавиатуры, она перекрывает сам инпут, куда вводится текст. Также капризный Safari любит скролить и зумить, что ломает пользовательский опыт. Пришлось провести немало исследований и пойти на определенные хитрости, чтобы это обойти. RvSheet автоматически увеличивает высоту, располагая поле для ввода прямо над клавиатурой, в том случае если это действительно требуется.
Гибкость настроек
RvSheet предлагает несколько типов модальных окон и множество настроек. Вы можете выбрать подходящий вариант для любого сценария. Подробнее с документацией можно ознакомиться здесь.
Подключение
RvSheet довольно просто подключается и интегрируется с любой JS-библиотекой.
У вас также есть полный контроль над разметкой и стилями:
Playground
Мы подготовили для вас playground, чтобы вам было проще познакомиться с продуктом.
Бортовой дневник UX-2189
Во время первой экспедиции Reevo Земля-Марс был разработан модульный компонент под названием RvSheet. Этот компонент стал важным для обеспечения межгалактической мобильности и адаптивности внутренних модулей корабля. На этапе проектирования инженеры столкнулись с проблемой создания чего-то, что могло бы мгновенно изолировать данные или задачи от общего информационного пространства, оставаясь при этом полностью интегрированным с основными системами корабля. RvSheet создает изолированные рабочие зоны, защищенные от перегрузок и окружающего шума. Будь то стратегическое совещание с капитаном или инженерная корректировка траектории, RvSheet позаботился о том, чтобы для каждой задачи нашлось свое защищенное пространство.
Playground: https://reevo.design/modules/sheet
X/Twitter: https://x.com/reevo_design