Getting started

Установка

npm install vmk-ui-kit

HTML/JS

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/assets/fonts/phosphor-icons/src/css/icons.css">
<link rel="stylesheet" href="/css/kit.css">
<script src="/js/vmk-ui-kit.js"></script>

VMKUIKit.Toasts.createSuccess("Saved", "Changes applied").show();

Vue 3

import "vmk-ui-kit/dist/css/kit.css";
import "vmk-ui-kit/dist/assets/fonts/phosphor-icons/src/css/icons.css";
import { GnButton, GnTabs } from "vmk-ui-kit/vue";

Убедитесь, что шрифт Plus Jakarta Sans подключён в HTML вашего приложения:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

Или глобальная регистрация:

import { createApp } from "vue";
import { VMKUiVue } from "vmk-ui-kit/vue";
import App from "./App.vue";

createApp(App).use(VMKUiVue).mount("#app");

Иконки — SVG из набора, предоставленного дизайном. В HTML/JS используйте VMKUIKit.Icons.iconNode(name) или inline SVG. В Vue передавайте имя иконки в prop icon:

<!-- vanilla: через helper -->
<span id="icon"></span>
<script>VMKUIKit.Icons.iconNode('arrows/arrow/right').then(el => document.getElementById('icon').appendChild(el));</script>

<!-- Vue -->
<GnButton icon="arrows/arrow/right">Next</GnButton>

Для обратной совместимости с gnexus-ui-kit компоненты также поддерживают имена в стиле Phosphor Icons (ph-house) — они будут мапиться на ближайшую SVG-иконку из набора.