渲染输入控件

字段渲染

Editor widget 提供了渲染各种输入控件的功能。这些控件包括基本输入类型、高级组件以及评论和任务列表等专用 widget。每个控件均可通过标签、键名和附加属性进行自定义，以满足特定使用场景的需求。

在 Editor 中渲染颜色选择控件

从 @svar-ui/svelte-core 导入 ColorSelect 控件，并将其注册为 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} />

颜色选择控件允许用户通过图形界面选取颜色。该控件适用于需要定义颜色的场景，例如自定义主题或为分类分配颜色。

在 Editor 中渲染日期选择控件

从 @svar-ui/svelte-core 导入 DatePicker 控件，并将其注册为 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 中渲染单选按钮

从 @svar-ui/svelte-core 导入 RadioButtonGroup 控件，并将其注册为 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} />

只读块用于展示无法编辑的静态信息，适合显示预定义或系统生成的数据。

在 Editor 中渲染富选择控件

从 @svar-ui/svelte-core 导入 RichSelect 控件，并将其注册为 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} />

富选择控件允许用户从选项列表中进行选择，并支持颜色或图标等附加属性以提升可视化效果，适合用于优先级选择或分类场景。

在 Editor 中渲染滑块控件

从 @svar-ui/svelte-core 导入 Slider 控件，并将其注册为 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} />

滑块控件用于在预定义范围内选取数值，常用于音量、亮度或评分系统等设置场景。

在 Editor 中渲染可编辑文本控件

这是一个内置控件，无需额外注册。

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

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

<Editor {items} />

可编辑文本控件是用于输入单行文本的基本输入字段，适合用于名称、标题或简短描述等简单数据录入场景。

在 Editor 中渲染文本域控件

这是一个内置控件，无需额外注册。

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

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

<Editor {items} />

文本域控件提供多行输入字段，适用于输入较长文本，例如评论、描述或备注。

在 Editor 中添加评论

从 @svar-ui/svelte-comments 导入 Comments widget，并将其注册为 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} />

评论 widget 允许用户在编辑器中添加、查看和管理评论，支持用户标识和时间戳，适用于协作工作流或反馈系统。

相关示例： Comments

在 Editor 中添加任务列表

从 @svar-ui/svelte-tasklist 导入 TasList widget，并将其注册为 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} />

任务列表 widget 将任务管理功能集成到编辑器中，支持任务标题和状态更新字段，适用于创建和跟踪任务。

相关示例： Tasklist