Так что же такое модальное? Как правило, модальное окно — это любое всплывающее окно, которое вызывает взаимодействие с пользователем. Как обычные пользователи Интернета, мы все очень хорошо знаем их, поскольку они стали обычным явлением в UX/UI.
Работая над фэнтезийным бейсбольным проектом с помощью React.js, я увидел потребность во всплывающем окне, которое точно соответствовало бы цели модального окна. Никогда раньше не пользовавшись ими, я решил углубиться и посмотреть, что я могу узнать о них!
Модалы прекрасны по многим причинам. Они заставляют пользователей оставаться в пределах правильного пути рабочего процесса веб-страницы, они заставляют пользователей сосредоточиться на одной задаче за раз и сокращают время загрузки или ожидания на вашем веб-сайте. Единственная критика, которую я вижу в отношении модальных окон, касается основных компонентов дизайна. Некоторые критически относятся к типичным шаблонам модального дизайна, однако Semantic UI смог решить эту проблему, предоставив предварительно созданные модальные компоненты, готовые к работе.
Перейдя на страницу документации Semantic UI React и перейдя на вкладку Modal, вы увидите, насколько проста на самом деле настройка. Модальные компоненты также очень легко настраиваются благодаря множеству реквизитов, доступных в верхней части страницы документации.
Для моей ситуации с моим фэнтезийным бейсбольным приложением я искал что-то простое в реализации и хорошо спроектированное для отображения определенных составов команд MLB — именно это и предлагал Semantic. Как только я разработал свою программу и извлек данные по мере необходимости, все, что мне нужно было сделать, это открыть модальное окно, и я не мог поверить, насколько это просто.
Каждая из моих командных карточек MLB на моем сайте делает еще одну выборку, чтобы получить конкретный состав команды этой карточки в тот момент, когда пользователь наводит указатель мыши на нижний уровень карточки (где находится кнопка «Просмотреть состав»). Эта кнопка View Roster является «триггером» для каждого отдельного модального компонента. Триггер — это реквизит этого модального окна, который действует для него как onClick. Как только я убедился, что Modal правильно отображает информацию о составе моей команды, я решил поиграть и проверить различные шаблоны проектирования, которые я мог обнаружить с другими компонентами Semantic. Их предварительно созданные компоненты «Item» добавили отличный вид дизайну длинного списка, который очень нужен для моего формата списка.
После реализации этого дополнительного аспекта дизайна в моем коде я получил следующий результат.
И вот оно! В будущем я собираюсь поэкспериментировать с импортом модальных окон как отдельных компонентов, а также настраивать и создавать их самостоятельно, а не полагаться на пользовательский интерфейс Semantic (каким бы он ни был замечательным). В целом, это был очень забавный эксперимент и опыт обучения, и я обязательно продолжу внедрять модальные окна в свои проекты.
