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

Отображение элементов управления вводом

Отображение полей​

Виджет редактора предоставляет функциональность для отображения различных элементов управления вводом. Эти элементы включают базовые типы ввода, расширенные компоненты и специализированные виджеты, такие как комментарии и списки задач. Каждый элемент управления можно настроить с помощью меток, ключей и дополнительных свойств под конкретные задачи.

Отображение элемента выбора цвета в редакторе​

Импортируйте элемент управления ColorSelect из @svar-ui/vue-core и зарегистрируйте его как элемент Editor:

<script setup>
  import { Editor, registerEditorItem } from "@svar-ui/vue-editor";
  import { ColorSelect } from "@svar-ui/vue-core";

  registerEditorItem("colorselect", ColorSelect);

  const items = [
    {
      comp: "colorselect",
      key: "name",
      label: "Name"
    }
  ];
</script>

<template>
  <Editor :items="items" />
</template>

Элемент выбора цвета позволяет пользователям выбирать цвет через графический интерфейс. Это идеально подходит для случаев, когда нужно задать цвет — например, при настройке тем или назначении цветов категориям.

Отображение элемента выбора даты в редакторе​

Импортируйте элемент управления DatePicker из @svar-ui/vue-core и зарегистрируйте его как элемент Editor:

<script setup>
  import { Editor, registerEditorItem } from "@svar-ui/vue-editor";
  import { DatePicker } from "@svar-ui/vue-core";

  registerEditorItem("datepicker", DatePicker);

  const items = [
    {
      comp: "datepicker",
      key: "name",
      label: "Name"
    }
  ];
</script>

<template>
  <Editor :items="items" />
</template>

Элемент выбора даты позволяет пользователям выбирать дату из календаря. Он полезен в сценариях планирования, установки дедлайнов или любого другого ввода, связанного с датами.

Отображение переключателей в редакторе​

Импортируйте элемент управления RadioButtonGroup из @svar-ui/vue-core и зарегистрируйте его как элемент Editor:

<script setup>
  import { Editor, registerEditorItem } from "@svar-ui/vue-editor";
  import { RadioButtonGroup } from "@svar-ui/vue-core";

  registerEditorItem("radio-group", RadioButtonGroup);

  const items = [
    {
      comp: "radio-group",
      key: "name",
      label: "Name",
      options: [
        {
          value: "s",
          label: "Scorpions",
        },
        {
          value: "m",
          label: "Muse",
        },
      ]
    }
  ];
</script>

<template>
  <Editor :items="items" />
</template>

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

Отображение блока только для чтения в редакторе​

Это встроенный элемент управления, который не требует дополнительной регистрации.

<script setup>
  import { Editor } from "@svar-ui/vue-editor";

  const items = [
    {
      comp: "readonly",
      key: "name",
      label: "Name"
    }
  ];
</script>

<template>
  <Editor :items="items" />
</template>

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

Отображение расширенного элемента выбора в редакторе​

Импортируйте элемент управления RichSelect из @svar-ui/vue-core и зарегистрируйте его как элемент Editor:

<script setup>
  import { Editor, registerEditorItem } from "@svar-ui/vue-editor";
  import { RichSelect } from "@svar-ui/vue-core";

  registerEditorItem("select", RichSelect);

  const items = [
    {
      comp: "select",
      key: "name",
      label: "Name",
      options: [
        { id: 1, label: "High", color: "#DF282F" },
        { id: 2, label: "Medium", color: "#FFC975" },
        { id: 3, label: "Low", color: "#65D3B3" },
      ]
    }
  ];
</script>

<template>
  <Editor :items="items" />
</template>

Расширенный элемент выбора позволяет пользователям выбирать из списка вариантов с дополнительными свойствами — например, цветами или иконками — для лучшей визуализации. Он идеально подходит для выбора приоритетов или категоризации.

Отображение ползунка в редакторе​

Импортируйте элемент управления Slider из @svar-ui/vue-core и зарегистрируйте его как элемент Editor:

<script setup>
  import { Editor, registerEditorItem } from "@svar-ui/vue-editor";
  import { Slider } from "@svar-ui/vue-core";

  registerEditorItem("slider", Slider);

  const items = [
    {
      comp: "slider",
      key: "name",
      label: "Name"
    }
  ];
</script>

<template>
  <Editor :items="items" />
</template>

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

Отображение редактируемого текстового поля в редакторе​

Это встроенный элемент управления, который не требует дополнительной регистрации.

<script setup>
  import { Editor } from "@svar-ui/vue-editor";

  const items = [
    {
      comp: "text",
      key: "name",
      label: "Name"
    }
  ];
</script>

<template>
  <Editor :items="items" />
</template>

Редактируемое текстовое поле — это базовое поле ввода для однострочного текста. Оно подходит для простого ввода данных: имён, заголовков или коротких описаний.

Отображение многострочного поля ввода в редакторе​

Это встроенный элемент управления, который не требует дополнительной регистрации.

<script setup>
  import { Editor } from "@svar-ui/vue-editor";

  const items = [
    {
      comp: "textarea",
      key: "name",
      label: "Name"
    }
  ];
</script>

<template>
  <Editor :items="items" />
</template>

Многострочное поле ввода предоставляет поле для ввода текста большого объёма. Оно идеально подходит для комментариев, описаний или заметок.

Добавление комментариев в редактор​

Импортируйте виджет Comments из @svar-ui/vue-comments и зарегистрируйте его как элемент Editor:

<script setup>
  import { Editor, registerEditorItem } from "@svar-ui/vue-editor";
  import { Comments } from "@svar-ui/vue-comments";

  registerEditorItem("comments", Comments);

  const users = [
    {
      id: 1,
      name: "John Doe",
      avatar: "https://via.placeholder.com/150",
    },
  ];

  const items = [
    {
      comp: "comments",
      key: "comments",
      label: "Comments",
      users,
      activeUser: 1,
    },

  ];

  const data = {
    comments: [
      {
        id: 1,
        user: 1,
        content: "Greetings, fellow colleagues.",
        date: new Date(),
      },
    ],
  }
</script>

<template>
  <Editor :items="items" :values="data" />
</template>

Виджет комментариев позволяет пользователям добавлять, просматривать и управлять комментариями внутри редактора. Он полезен для совместной работы или систем обратной связи — с идентификацией пользователей и временными метками.

Связанный пример: Comments

Добавление списка задач в редактор​

Импортируйте виджет TaskList из @svar-ui/vue-tasklist и зарегистрируйте его как элемент Editor:

<script setup>
  import { Editor, registerEditorItem } from "@svar-ui/vue-editor";
  import { TaskList } from "@svar-ui/vue-tasklist";

  registerEditorItem("tasks", TaskList);
  const items = [
    {
      comp: "tasks",
      key: "task",
      label: "Task",
    },
  ];

  const data = {
    task: [
      {
        id: 1,
        title: "Task 1",
        status: 1,
      },
    ],
  }
</script>

<template>
  <Editor :items="items" :values="data" />
</template>

Виджет списка задач встраивает функциональность управления задачами в редактор. Он подходит для создания и отслеживания задач с полями для заголовков и обновления статусов.

tasklist

Связанный пример: Tasklist