topvisor-ui

UI kit Topvisor Vue

Vue компоненты

В зависимости от необходимости можно загружать:

• один комонент

• все комоненты в рамках одной подбиблиотеки

• /components/ - папка со всеми js подбиблиотеками и компонентами

• /components/{{ libName }} - подбиблиотека компонентов, включает в одном файле все компоненты подбибилиотеки

• /components/{{ libName }}/{{ componentName }} - файл компонента

Другие ресурсы

• /ui.css - основная палитра цветов и стили компонентов
• /light.css - светлая тема
• /dark.css - темная тема

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

Подключение базовых стилей, переменных палитры и основных компонентов. Стили сложных компонентов рекомендуется грузить ассинхронно.

import 'topvisor-ui/ui.css';

Подключение стилей темы на примере светлой темы.

import 'topvisor-ui/light.css';

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

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

Пример подключения компонента Button как amd компонент.

requirejs(['topvisor-ui/amd/button/button.min'], TopButton => {
	console.log(TopButton);
});

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

В большинстве случаев группы компонентов грузить отдельно никогда нет смысла, поэтому она вынесены в подбиблиотеки.

Не грузите один и тот же компонент двумя способами, это приведет к тому, что он будет загружен дважды.

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

requirejs(['topvisor-ui/amd/button/button.min'], ({TopButton}) => {
	console.log(TopButton);
});

requirejs(['topvisor-ui/amd/forms.min'], TopForms => {
	const { TopButton } = TopForms;

	console.log(TopForms);
	console.log(TopButton);
});