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

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

Первые шаги​

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

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

или

yarn add @svar-ui/svelte-core
yarn add @svar-ui/svelte-editor
note

Пакет был перенесён с wx-svelte-editor на @svar-ui/svelte-editor. Публикация wx-svelte-editor продолжается до выхода обновления Svelte SVAR 3.0

Импортируйте виджет в проект.

<script>
  import { Willow } from '@svar-ui/svelte-core';
  import { Editor } from '@svar-ui/svelte-editor';
</script>

<Willow>
  <Editor />
</Willow>

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

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

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

<script>
  import { Editor, Willow } from "@svar-ui/svelte-editor";

  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>

<Willow>
  <Editor {items} {values} />
</Willow>
примечание

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

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