@topvisor/ui
Topvisor UI-kit Vue
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 1.2.0
- 1.1.0
- 1.0.41
- 1.0.40
- 1.0.39
- 1.0.38
- 1.0.37
- 1.0.36
- 1.0.35
- 1.0.34
- 1.0.33
- 1.0.32
- 1.0.31
- 1.0.30
- 1.0.29
- 1.0.28
- 1.0.27
- 1.0.26
- 1.0.25
- 1.0.24
- 1.0.21
- 1.0.20
- 1.0.19
- 1.0.18
- 1.0.17
- 1.0.16
- 1.0.15
- 1.0.14
- 1.0.13
- 1.0.12
- 1.0.11
- 1.0.10
- 1.0.9
- 1.0.8
- 1.0.7
- 1.0.6
- 1.0.4
- 1.0.3
- 1.0.2
- 1.0.1
- 0.9.37
- 0.9.36
- 0.9.35
- 0.9.33
- 0.9.32
- 0.9.30
- 0.9.29
- 0.9.26
- 0.9.25
- 0.9.24
- 0.9.23
- 0.9.22
- 0.9.21
- 0.9.19
- 0.9.18
- 0.9.17
- 0.9.16
- 0.9.15
- 0.9.14
- 0.9.13
- 0.9.12
- 0.9.11
- 0.9.10
- 0.9.9
- 0.9.8
- 0.9.7
- 0.9.6
- 0.9.5
- 0.9.4
- 0.9.3
- 0.9.2
- 0.0.43
- 0.0.42
- 0.0.41
- 0.0.38
- 0.0.37
- 0.0.36
- 0.0.35
- 0.0.34
- 0.0.33
- 0.0.18
- 0.0.17
- 0.0.16
- 0.0.15
- 0.0.14
- 0.0.13
- 0.0.12
- 0.0.11
- 0.0.10
- 0.0.9
- 0.0.8
- 0.0.4
- 1.1.0-date.0
- 1.0.42-popupPosition.0
- 1.0.42-date.2
- 1.0.42-checkvisibility.3
- 1.0.42-checkvisibility.2
- 1.0.42-checkvisibility.1
- 1.0.42-checkvisibility.0
- 1.0.42-TopSelector.2
- 1.0.41-dialog.1
- 1.0.41-dialog.0
- 1.0.41-0
- 1.0.39-0
- 1.0.36-select-boolean.0
- 1.0.34-dev.3
- 1.0.34-dev.1
- 1.0.30-4
- 1.0.30-3
- 1.0.30-2
- 1.0.30-1
- 1.0.30-0
- 1.0.28-2
- 1.0.26-20
- 1.0.26-18
- 1.0.26-17
- 1.0.26-16
- 1.0.26-15
- 1.0.26-14
- 1.0.26-13
- 1.0.26-12
- 1.0.26-11
- 1.0.26-10
- 1.0.26-9
- 1.0.26-7
- 1.0.26-6
- 1.0.26-5
- 1.0.26-4
- 1.0.26-3
- 1.0.26-2
- 1.0.26-1
- 1.0.26-0
- 1.0.23-dev.44
- 1.0.23-dev.43
- 1.0.23-dev.42
- 1.0.23-dev.41
- 1.0.23-dev.40
- 1.0.23-dev.39
- 1.0.23-dev.38
- 1.0.23-dev.37
- 1.0.23-dev.36
- 1.0.23-dev.35
- 1.0.23-dev.34
- 1.0.23-dev.33
- 1.0.23-dev.32
- 1.0.23-dev.31
- 1.0.23-dev.30
- 1.0.23-dev.29
- 1.0.23-dev.28
- 1.0.23-dev.27
- 1.0.23-dev.26
- 1.0.23-dev.24
- 1.0.23-dev.23
- 1.0.23-dev.13
- 1.0.23-dev.12
- 1.0.23-dev.11
- 1.0.23-dev.10
- 1.0.23-dev.6
- 1.0.23-dev.5
- 1.0.23-dev.4
- 1.0.23-dev.3
- 1.0.23-dev.2
- 1.0.23-dev.1
- 1.0.23-dev.0
- 1.0.22-test-ci-cd-10
- 1.0.22-test.0
- 1.0.22-selectorRegion-pr
- 1.0.22-patch-textarea
- 1.0.22-dev.14
- 1.0.22-dev.13
- 1.0.22-dev.12
- 1.0.22-dev.3
- 1.0.21-pinia-1
- 1.0.20-selector2-4
- 1.0.20-selector2-3
- 1.0.20-focus-1
- 1.0.18-ux-5
- 1.0.18-top-info-4
- 1.0.18-top-info-2
- 1.0.18-top-info
- 1.0.18-fixes-7
- 1.0.18-dialog-footer-6
- 1.0.18-autofocus-3
- 1.0.16-add-domain-foo
- 1.0.14-pinia-prepare-2
- 1.0.14-pinia-prepare
- 1.0.13-fix-dialog-scroll
- 1.0.13-dialog-top-popup
- 1.0.12-jquery
- 1.0.11-fix-genDate
- 1.0.9-fix-css
- 1.0.8-tagSelector-1
- 1.0.8-fixed-2
- 1.0.8-fixed
- 1.0.1-colors-6
- 1.0.1-colors-5
- 1.0.1-colors-4
- 1.0.0-rc-3
- 1.0.0-rc-2
- 1.0.0-rc-1
- 1.0.0-colors-3
- 0.9.36-colors-2
- 0.9.36-colors-1
- 0.9.35-4
- 0.9.35-3
- 0.9.35-2
- 0.9.35-1
- 0.9.34-utils-components-8
- 0.9.34-utils-components-7
- 0.9.34-utils-components-6
- 0.9.34-utils-components-5
- 0.9.34-utils-components-4
- 0.9.34-utils-components-3
- 0.9.34-utils-components-2
- 0.9.34-utils-components-1
- 0.9.33-dev
- 0.9.31-3
- 0.9.29-colors-3
- 0.9.29-colors-2
- 0.9.29-colors
- 0.9.29-0
- 0.9.27-dev
- 0.9.26-dev
- 0.9.24-0
- 0.0.6-0
- 0.0.5-0
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);
});