Компоненты
Vueland UI предоставляет набор готовых компонентов для построения интерфейсов на Vue 3. Все компоненты поддерживают систему пресетов, темификацию через CSS-переменные и доступность (ARIA).
Компоненты со статусом Stable полностью задокументированы, покрыты тестами и готовы к использованию в продакшне. Остальные присутствуют в библиотеке, но их документация или тестовое покрытие ещё в процессе.
Разметка
| Компонент | Статус | Описание |
|---|---|---|
| CApp | Stable | Корневая обёртка приложения. Управляет скроллом и создаёт контекст для оверлеев |
| CMain | Stable | Основная контентная область. Используется внутри CApp |
Сетка
12-колоночная адаптивная сетка на flexbox. Брейкпоинты соответствуют стандарту Material Design и разделяются с утилитарными классами и useDisplay. Подробнее — в разделе Брейкпоинты.
| Компонент | Статус | Описание |
|---|---|---|
| CRow | Stable | Flex-строка. Управляет выравниванием и отступами |
| CCol | Stable | Колонка с адаптивной шириной, смещением и порядком |
| CSpacer | Stable | Заполняет свободное место и разделяет соседние элементы |
Поля формы
| Компонент | Статус | Описание |
|---|---|---|
| CForm | Stable | Обёртка формы. Координирует валидацию всех дочерних полей |
| CTextField | Stable | Текстовое поле с плавающим лейблом, иконками и подсказкой |
| CInput | Stable | Функциональная основа всех полей. Управляет состоянием, валидацией и пресетами |
| CField | — | Базовая оболочка поля: лейбл, подсказка, ошибка, слот для любого контрола |
| CCheckbox | — | Чекбокс с неопределённым состоянием и лейблом |
| CRadio | — | Радиокнопка, обычно используется внутри группы |
| CSwitch | — | Переключатель |
| CSelect | — | Выпадающий список на основе CMenu |
| CAutocomplete | — | Поле с автодополнением и фильтрацией |
Действия
| Компонент | Статус | Описание |
|---|---|---|
| CBtn | — | Кнопка с вариантами, размерами, иконками и состоянием загрузки |
Контент
| Компонент | Статус | Описание |
|---|---|---|
| CCard | Stable | Карточка с шапкой, телом и подвалом. Включает CCardHeader, CCardBody, CCardFooter |
| CList | — | Список и элементы списка. Поддерживает выбор, навигацию с клавиатуры и ARIA |
| CIcon | — | Рендерер иконок. Поддерживает кастомные резолверы и Font Awesome |
| CImg | — | Изображение с ленивой загрузкой и слотом для заглушки |
| CLabel | — | Доступный элемент лейбла |
Оверлеи
| Компонент | Статус | Описание |
|---|---|---|
| CMenu | Stable | Плавающий контейнер, позиционируемый относительно активатора. Основа для выпадающих списков, select и тултипов |
| CTooltip | Stable | Лёгкий тултип на основе CMenu. Следует паттерну WAI-ARIA tooltip |
| CDialog | — | Модальный диалог с фоном, ловушкой фокуса и блокировкой скролла |
| COverlay | — | Низкоуровневый примитив оверлея, используемый CMenu и CDialog |