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 componentComponentName.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
- …
- …