Custom Components

Overview

Creating a Custom Component is easy. Let’s walk through some simple examples.

Component 1

  1. Create /src/components/ExampleTestCustomComponents/Custom1-Marquee.svelte
<script lang="ts">
  import type { ComponentOptions, Field, FormTab } from "@pragmatic-engineering/svelte-form-builder-enterprise/Utils/types";
  export let componentOptions: ComponentOptions;
  export let field: Field;
  export let tab: FormTab;
</script>

<h4>Custom Component 1</h4>

<marquee>This text will scroll from right to left</marquee>

<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
  <marquee behavior="alternate"> This text will bounce </marquee>
</marquee>
  1. Create /src/components/ExampleTestCustomComponents/Custom3-Text.svelte
<script lang="ts">
  import { ComponentLabel, convertDataAttributes, GroupSlot } from "@pragmatic-engineering/svelte-form-builder-[flavor]";
  import type { ComponentOptions, Field, FormTab, ValidationResult } from "@pragmatic-engineering/svelte-form-builder-[flavor]/Utils/types";
  export let componentOptions: ComponentOptions;
  export let field: Field;
  export let tab: FormTab;
</script>

<GroupSlot>
  <ComponentLabel field="{field}" />

  <input {...field.htmlAttributes}
  {...convertDataAttributes(field.dataAttributes)}
  type="text" bind:value="{field.htmlAttributes.value}" />
</GroupSlot>
  1. Add into componentOptions
let options: BuilderOptions = {
  componentOptions: [
    {
      customImport: import("../../../../components/ExampleTestCustomComponents/Custom1-Marquee.svelte"),
      componentName: "Custom 1",
      icon: "🎁",
    },
    {
      customImport: import("../../../../components/ExampleTestCustomComponents/Custom3-Text.svelte"),
      componentName: "Text",
      icon: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-square-text" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6zm0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/></svg>`,
    },
  ],
};

Demo