Gavia UIv1.0.0

Документация

Подключение библиотеки, работа с компонентами, тексты, цвета и иконки. У компонентов есть примеры с настройками и кодом для копирования.

01 / Начало

Установка

Vue 3 — единственная обязательная peer-зависимость. Установите пакет, подключите стили и выберите тему. WlConfig задаёт общие настройки pt, локали и анимаций. В исходниках для 1.0 встроенные подписи по умолчанию английские; для русского явно задайте locale: wlLocaleRu. Эта несовместимая миграция исходников не опубликована как патч 0.12.1.

Установка через pnpm
pnpm add gavia-ui vue
main.ts · подключение приложения
import { createApp } from "vue";
import "gavia-ui/styles/reset.css";
import "gavia-ui/styles/base.css";
import "gavia-ui/styles/primitives.css";
import "gavia-ui/themes/white.css";
import App from "./App.vue";

document.documentElement.dataset.wlTheme = "white";
createApp(App).mount("#app");

В примере подключена Classic. Для Classic Dark, Newspaper, Gavia или Gavia Dark импортируйте соответствующий CSS из gavia-ui/themes/ и установите data-wl-theme на корневом элементе. Gavia и её шрифт доступны с 0.9.1; Gavia Dark — с 0.10.0. Для обеих тем Gavia дополнительно подключите gavia-ui/styles/fonts/gavia.css.

Основы интерфейса

Типографика, layout и тексты интерфейса. Правила и примеры с кодом.

Типографика

HTML задаёт структуру текста, CSS-класс — его оформление. Шрифты и размеры берутся из темы.

Layout и сетка

Задайте ширину страницы, колонки, gap и брейкпоинты. Используйте CSS-классы библиотеки, а особенности layout настройте локальным CSS.

Адаптивность

Выберите, от чего зависит перестройка: от ширины окна, контейнера или поведения компонента. Ниже — четыре примера с настройками.

Контент и состояния

Подписи и сообщения объясняют, что происходит и что делать дальше. Цвет и оформление дополняют текст.

02 / Компоненты

Компоненты и примеры

В каталоге 60 компонента. Для каждого есть пример с настройками, дополнительные сценарии, API и правила доступности. Props, значения по умолчанию, события, слоты и v-model взяты из манифеста.

Примеры, API и доступность

WlButton

Варианты, размеры, disabled/loading, pt и правила доступности. Код Vue SFC совпадает с примером на странице.

03 / Оформление

Токены и темы

Токены разделены на foundation → semantic → component и используют namespace --wl-*. Подключите CSS темы и выберите её через data-wl-theme. Доступно пять тем; при переключении DOM и поведение компонентов сохраняются.

Руководство по дизайн-системе

04 / Иконки

Иконки

Передайте в name имя иконки из встроенного SVG-каталога. Для добавления иконок используйте icons:sync и icons:check.

Правила создания SVG

05 / Обновление

Миграция

Имена exports Wl*, классов wl-* и токенов --wl-* сохраняются. Перед обновлением прочитайте заметки к нужной версии и проверьте своё приложение.