Components

Creating a component

To begin, select the Components item under Developer-tools in the sidebar on the left:

To create a new component, click the + New button located in the top right corner. Alternatively, you can select a pre-made component preset that is ready to be used by clicking on + New from Template.

You should see something like this:

Options

Here are the different options you can set on your component:

• Icon
• Category
• Form-structure
  • Label
  • Properties
• Template
• Script
• Style

Icon

Icons make it easier to find and recognize elements when building your page. To assign an icon for your component, click on the "Select Icon" field.

Category

You can group your components into different categories to organize them more easily. This is especially useful when you have a large number of components.

Template

This is where you define the structure of your component. You can use Handlebars to use data different between each element using this component. The properties available are defined in the properties section below under Form-structure. Here is a simple example showing how to include a defined property with id: title in your component.

<p>{{ properties.title }}</p>

If you want to nest elements when building your pages, you need to enable the wrapping component to have children. For this, check the Can have children checkbox, and include this in your template at the position you want nested elements to be rendered:

{{ render_elements(children) }}

Script

If your component should have extra functionality, you can add a script. This is just normal javascript code that is executed on the client. If you export a function named init from this script block this function will be called for every element that uses this component. You can the use the parameters passed to this function to access each element and its data separately.

export function init({ element, data, id }) {
    element.addEventListener('click', () => {
        console.log(`Element with id ${id} was clicked`);
    });
}

Style

There are multiple ways of styling your components. You can use normal CSS in the style field, or you can use TailwindCSS directly in your template. Components using TailwindCSS will only be rendered correctly on pages where tailwindcss is enabled.

.link {
    color: black;
    text-decoration: none;
}

Form-structure

Here you define the structure of the data you can set when using this component. This is data which you can edit directly in the page builder. Here is a simple example with two text inputs:

{
    "label": {
        "de": "",
        "en": ""
    },
    "properties": [
        {
            "id": "link",
            "type": "text",
            "label": {
                "en": "Link",
                "de": "Verknüpfung"
            }
        },
        {
            "id": "name_of_page",
            "type": "text",
            "label": {
                "en": "Name of page",
                "de": "Name der Seite"
            }
        }
    ]
}

This is how using this element will look in the page builder:

Label

This label will be shown above the form to edit each elements data. This is why you should define it in english and german, since the neleto admin ui supports switching between these languages.

{
    "en": "Link",
    "de": "Verknüpfung"
}

Properties

Here you define the form for editing data for each element. Each form input here corresponds to a value in the elements data, which you can then access in your component's template. The form will be located on the right-hand side within the page builder, or alternatively, on devices with smaller screens, it can be accessed through the Selection tab on the left side.