Рендеринг элементов управления вводом

Рендеринг полей

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

Рендеринг элемента управления выбором цвета в Editor

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

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

  registerEditorItem("colorselect", ColorSelect);

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

<Editor {items} />

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

Рендеринг элемента управления DatePicker в Editor

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

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

  registerEditorItem("datepicker", DatePicker);

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

<Editor {items} />

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

Рендеринг радиокнопок в Editor

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

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

  registerEditorItem("radio-group", RadioButtonGroup);

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

<Editor {items} />

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

Рендеринг блока только для чтения в Editor

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

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

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

<Editor {items} />

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

Рендеринг элемента управления RichSelect в Editor

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

<script>
  import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
  import { RichSelect } from "@svar-ui/svelte-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>

<Editor {items} />

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

Рендеринг элемента управления Slider в Editor

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

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

  registerEditorItem("slider", Slider);

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

<Editor {items} />

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

Рендеринг редактируемого текстового поля в Editor

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

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

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

<Editor {items} />

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

Рендеринг элемента управления Textarea в Editor

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

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

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

<Editor {items} />

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

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

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

<script>
  import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
  import { Comments } from "@svar-ui/svelte-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>

<Editor {items} values={data} />

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

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

Добавление списка задач в Editor

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

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

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

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

<Editor {items} values={data} />

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

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