UI kit Topvisor Vue

Vue компоненты

Компоненты поставляются в двух форматах:

amd (requirejs)
es

Компоненты делятся на разные библиотеки и доступны через импорт этих библиотек.

Каждая библиотека находится в отдельной папке, соответствующей имени библиотеки.

Все стили модулей находятся в папке /assets/ в файлах соответствующих имени библиотеки. В этой же папке располагаются стили для асинхронно загружаемых компонентов. Все стили грузятся автоматически вместе с загрузкой компонента.

Документация и описание всех компонентов: https://ui.topvisor.com/

Общие стили UI

/assets/core.css - основная палитра цветов и общие стили и модификаторы компонентов
/assets/themes/* - стили тем оформления

Подключение стилей

Стили компонентов подгружаются автоматически.

Стили UI core.css необходимо подгрузить на страницу вручную.

import '@topvisor/ui/assets/core.css';

<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/assets/core.css" rel="stylesheet">

Подключение стилей темы

Стили темы необходимо подгрузить на страницу вручную.

Для смены темы необходимо подгрузить файл стилей необходимой темы и отключить стили предыдущей темы.

import '@topvisor/ui/assets/themes/light.css';


<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/assets/themes/light.css" rel="stylesheet">

Внешние зависимсоти

Стили icomoon добавлены в пакет и их необходимо подгрузить на страницу вручную.

import '@topvisor/ui/icomoon/style.css';


<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/icomoon/style.css" rel="stylesheet">

Подключение компонентов

Пример подключения библиотеки Forms и компонента Button:

require(['@topvisor/ui/forms/forms.amd'], ({ Button }) => {
    console.log(Button);
});

require(['@topvisor/ui/forms/forms.amd'], Forms => {
    const { Button } = Forms;

    console.log(Forms);
    console.log(Button);
});

Detalhes do pacote

@topvisor/ui

readme (leia-me)