CApp

CApp — корневой компонент-оболочка Vueland UI. Он должен оборачивать всё приложение. Компонент настраивает API управления прокруткой для оверлеев (диалоги, меню, тултипы) и добавляет семантический landmark role="application" для доступности.

Базовое использование

<template>
  <c-app>
    <c-main>
      <!-- содержимое страницы -->
    </c-main>
  </c-app>
</template>

Управление прокруткой

CApp предоставляет ApplicationApi через provide/inject. Внутренне он используется CDialog, CMenu и COverlay для блокировки и восстановления прокрутки страницы при открытии оверлеев. Вы также можете получить доступ напрямую через композабл useApplication.

import { useApplication } from '@vueland/ui/composables'

const app = useApplication()

app?.lockScroll() // заблокировать прокрутку
app?.unlockScroll() // восстановить прокрутку
app?.getScrollTop() // текущая позиция прокрутки Y
app?.getScrollLeft() // текущая позиция прокрутки X

---

API

Props

У CApp нет пропсов.

Slots

Слот

Описание

default

Содержимое приложения

Events

CApp не эмитит событий.

Expose

CApp ничего не экспозит напрямую. Для доступа к API прокрутки используйте inject($APP_API_KEY).

CSS-классы

Класс

Описание

c-app

Корневой элемент

c-app__wrapper

Внутренняя обёртка для контента

c-app--lock-scroll

Служебное состояние блокировки прокрутки

CSS-переменные

CApp не определяет настраиваемых компонентных токенов. При блокировке прокрутки компонент временно записывает runtime-переменные на корневой элемент:

Переменная

Когда появляется

Описание

--c-app-scroll-top

После lockScroll()

Отрицательная сохранённая позиция прокрутки по Y

--c-app-scroll-left

После lockScroll()

Отрицательная сохранённая позиция прокрутки по X

Эти значения управляются useApplicationScroll и удаляются после unlockScroll().

Доступность

Корневой элемент имеет role="application", что помечает область как интерактивное веб-приложение для программ чтения с экрана.