UI kit Topvisor Vue

Зависимости

• Vue 3
• lodash 4:
  • debounce

Vue компоненты

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

• amd (requirejs)
• es

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

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

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

Список доступных библиотек компонентов см. на npmjs.

Общие стили UI

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

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

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

Стили 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/light.css';

<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/assets/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);
});