Перейти к основному содержимому

Начало работы

Первые шаги​

Чтобы начать работу с виджетом, добавьте необходимые пакеты в проект.

npm install @svar-ui/vue-core
npm install @svar-ui/vue-editor

или

yarn add @svar-ui/vue-core
yarn add @svar-ui/vue-editor

Импортируйте виджет в проект. Чтобы все элементы отображались корректно, импортируйте тему и стили.

<script setup>
import { Willow } from '@svar-ui/vue-core'; //import theme
import { Editor } from '@svar-ui/vue-editor';
import "@svar-ui/vue-editor/all.css"; //import styles
</script>

<template>
  <Willow>
    <Editor />
  </Willow>
</template>

Компонент Willow выступает в роли обёртки темы по умолчанию, которая добавляет необходимые стили для всех виджетов SVAR. Компонент Editor может работать без него, однако в этом случае стили применяться не будут и их потребуется добавить вручную. Рекомендуется размещать тег Willow на верхнем уровне приложения.

Полный код инициализации​

Чтобы увидеть виджет в действии, добавьте в него несколько элементов.

<script setup>
import { Editor, Willow } from "@svar-ui/vue-editor";
import "@svar-ui/vue-editor/all.css"; //import styles

const items = [
  { comp: "text", key: "name", label: "Name" },
  { comp: "text", key: "descr", label: "Description" },
  { comp: "text", key: "role", label: "Role" }
];

const values = {
  name: "John Doe",
  descr: "Lorem ipsum dolor sit amet",
  role: "admin"
};
</script>

<template>
  <Willow>
    <Editor :items="items" :values="values" />
  </Willow>
</template>
примечание

Для корректной инициализации рекомендуется применять тему на верхнем уровне приложения. Если вы используете компонент Editor самостоятельно, не забудьте обернуть его в тему (в приведённом примере применяется тема Willow).

Связанные статьи: