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

items

Описание​

Опционально. Определяет компоненты, которые будут отрисованы в Editor

Использование​

items?: {
   comp?: string | Component;
   key?: string;
   label?: string;
   labelTemplate?: (value: any) => string;
   column?: "right" | "left";
   batch?: string | number;
   hidden?: boolean;
   section?: string;
   sectionMode?: "accordion" | "exclusive";
   activeSection?: boolean;
   options?: {
      id?: string | number;
      label?: string;
      [key: string]: any;
   }[];
   required?: boolean;
   validation?: (value: any) => boolean;
   validationMessage?: string;
   config?: {
      [key: string]: any;
   };
   [key: string]: any;
	}[];

Параметры​

  • comp – (обязательный) задаёт тип компонента (например, "text", "textarea", "select") или Svelte-компонент. Если компонент не найден или не указан, будет использован "text".
  • key – (обязательный) уникальный ключ, связывающий элемент со свойством в объекте values редактора
  • label – (опциональный) текстовая метка, отображаемая рядом с элементом управления
  • labelTemplate – (опциональный) функция, возвращающая строку с пользовательской меткой на основе текущего значения
  • column – (опциональный) определяет колонку, в которой отрисовывается элемент управления: "left" | "right"
  • batch – (опциональный) группирует элементы для совместной отрисовки или обработки
  • hidden – (опциональный) если true, элемент не будет отрисован
  • section – (опциональный) назначает элемент в именованную секцию
  • sectionMode – (опциональный) определяет поведение сворачиваемых секций:
    • "accordion" – несколько секций могут оставаться открытыми одновременно
    • "exclusive" – одновременно может оставаться открытой только одна секция
  • activeSection – (опциональный) если true, секция будет развёрнута по умолчанию
  • options – (опциональный) определяет список доступных вариантов. Используется компонентами select, radio и другими
  • required – (опциональный) помечает поле как обязательное
  • validation – (опциональный) пользовательская функция валидации. Должна возвращать true для корректных значений и false в противном случае
  • validationMessage – (опциональный) сообщение, отображаемое при неуспешной валидации
  • config – (опциональный) произвольный объект конфигурации, передаваемый непосредственно в компонент
  • [key: string] – (опциональный) позволяет добавлять дополнительные атрибуты или свойства к элементу редактора

Примеры​

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

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

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

<Editor {items} />

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

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

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

<Editor {items} />

Отрисовка радиокнопок в редакторе​

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

   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} />

Отрисовка элемента управления textarea в редакторе​

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

   registerEditorItem("textarea", TextArea);

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

<Editor {items} />

Отрисовка элемента управления slider в редакторе​

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

   registerEditorItem("slider", Slider);

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

<Editor {items} />

Отрисовка элемента управления rich select в редакторе​

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

   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} />

Отрисовка элемента управления datepicker в редакторе​

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

   registerEditorItem("datepicker", DatePicker);

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

<Editor {items} />

Отрисовка элемента управления colorpicker в редакторе​

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

   registerEditorItem("colorselect", ColorSelect);

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

<Editor {items} />

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

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

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

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

Разделение формы на секции​

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

   registerEditorItem("comments", Comments);

   const items = [
      {
        comp: "section",
        key: "common-section",
        label: "Common settings",
      },
      {
        comp: "text",
        key: "name",
        label: "Name",
      },
      {
        comp: "textarea",
        key: "descr",
        label: "Description",
      },
      {
        comp: "section",
        key: "comments-section",
        label: "Comments",
      },
      {
        comp: "comments",
        key: "comments",
        section: "comments-section",
      }
   ];
</script>

<Editor {items} />

Все поля отрисовываются внутри сворачиваемых секций.

Пометка поля как обязательного​

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

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

<Editor {items} />

Этот пример показывает, как пометить поле name как обязательное в редакторе.

Определение правила валидации для поля​

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

   const items = [
      { comp: "text", key: "name", label: "Name",
        validation: val => {
          const regEx = /^[a-zA-Z]+$/;
           return val && regEx.test(val);
        },
        validationMessage: "wrong name format"
      }
   ];
</script>

<Editor {items} />

Этот пример определяет правило валидации для поля "Name", требующее, чтобы введённое значение соответствовало заданному регулярному выражению. Если значение не соответствует, будет отображено сообщение валидации "wrong name format".