Components

Scope

There are …

• Included interkit components that come with interkit
• Project components that you can custom build for your project

Blockly

Components are arranged via Blockly. The blocklyState.xml gets translated into an App.svelte. Both files are equivalent to the blockly representation you see in the component editor.

Component Files

Eeach component consists of two files:

• ComponentName.svelte - a svelte component
• ComponentName.yaml - definitions for the component editor

Example

You can find this example for a custom project component in src/components/ProjectComponentExample.svelte

ProjectComponentExample.svelte

<script>
  export let text = "override this example text in blockly!"
  export let options = "red"
</script>

<p style="--color: {options}">
  {text}
</p>

<slot></slot>

<style>
  p {
    background-color: var(--color);
  }
</style>

ProjectComponentExample.yaml

name: ProjectComponentExample
title: ProjectComponentExample
colour: 100
fields:
  - type: string
    name: text
  - type: options
    name: options
    options:
      - yellow
      - red
  - type: slot
    name: default
toolboxCategory: Project

Resulting ProjectComponentExample in component editor

List of supported attributes in .yaml

• type
  • slot
  • options
  • string
  • …
• …