Перейти к содержимому

CoreSplashScreen

Примеры использования и документация.

Полноэкранный splash: мозаика из квадратов логотипа, по сетке диагональной волной течёт flow-градиент; случайные ячейки дышат масштабом, случайная вспыхивает яркостью на 2с — следующая через 100–300мс; курсор зажигает ячейку. role="status" + пауза волны (SC 2.2.2); закрывается только через v-model.

Мозаика строится на клиенте, когда известны реальные размеры экрана; до гидратации видны только логотип, подпись и фон на весь экран — их критические стили инлайнятся в <head> из app/app.vue (без мерцания при гидрации). Плитки появляются каскадом: каждая масштабируется от 0 до 1 из центра своей ячейки, задержка каждой следующей — +10 мс; волна идёт по диагонали от левого верхнего угла. При prefers-reduced-motion каскад отключён — мозаика видна сразу.

Доступность

  • Корень — role="status" с именем: пропс label или локализованное «Загрузка» (coreSplashScreen.loading) — скринридер объявляет загрузку; вся мозаика — aria-hidden.
  • Бесконечные волна, дыхание и вспышки — SC 2.2.2: пауза через проп paused, авто-пауза в фоновой вкладке (visibilitychange) и полная статика при prefers-reduced-motion; fade появления/скрытия тоже отключается.
  • Прогресс-полоса декоративна (aria-hidden) — значение уже объявляет role="status".
  • Экран закрывается только через v-model — ловушки фокуса нет, это не модалка. Зависшую загрузку снимает Esc (dismissible, включён по умолчанию) — клавиатурный выход из полноэкранного состояния.

«Переключить» — тумблер v-model (показать/скрыть без мыши по оверлею). Сам экран закрывается тремя путями: Esc (dismissible), кнопка «Переключить» или завершение прогресса. Если загрузка зависла — Esc всегда возвращает на страницу. «Свой контент» — базовый слот заменяет знак и подпись целиком.