Components

Erstellen eines Components

Um zu beginnen, wähle den Punkt Components unter Entwickler-Werkzeuge in der Seitenleiste auf der linken Seite:

Um einen neuen Component zu erstellen, klicke auf die Schaltfläche „+ Neu“ in der oberen rechten Ecke Ecke. Alternativ kannst du eine vorgefertigte Component-Voreinstellung auswählen, die bereit ist, verwendet zu werden, indem du auf „+ Neu aus Vorlage“ klickst.

Du solltest etwas wie das hier sehen:

Optionen

Hier sind die verschiedenen Optionen, die du bei einen Component einstellen kannst:

• Icon
• Kategorie
• Formular-Struktur
  • Label
  • Properties
• Template
• Script
• Style

Icon

Icons erleichtern das Finden und Erkennen von Elementen beim Aufbau Ihrer Seite. Um ein Icon für deinen Component zuzuweisen, klicke auf das Feld „Icon auswählen“.

Kategorie

Du kannst deine Components in verschiedenen Kategorien gruppieren, um sie besser zu organisieren. Dies ist besonders nützlich, wenn du eine große Anzahl von Components hast.

Template

Hier definierst du die Struktur deines Components. Du kanns Handlebars verwenden um auf Daten zuzugreifen, die zwischen den Elementen mit diesem Component unterschiedlich sind. Die verfügbaren Eigenschaften sind im Abschnitt properties unter Form-structure dokumentiert. Hier ist ein einfaches Beispiel, das zeigt, wie du eine definierte Eigenschaft mit id: title in deinem Component einfügst.

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

Wenn du beim Aufbau deiner Seiten Element verschachteln willst, musst du dem Component festlegen, dass dieser Kinder haben kann. Klicke dazu die Checkbox Kann Kinder haben und füge dies in das Template ein, wo du die Kinder anzeigen willst:

{{ render_elements(children) }}

Script

Wenn dein Component zusätzliche Funktionen haben soll, kannst du ein Script hinzufügen. Dabei handelt es sich um normalen Javascript-Code, der Client-seitig ausgeführt wird. Wenn du aus dem Script-block eine Funktion init exportierst, wird diese Funktion für jedes Element das diesen Component verwendet aufgerufen. Du kannst die Parameter, die diese Funktion bekommt, verwenden um auf die Daten jedes Elements zuzugreifen.

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

Style

Es gibt mehrere Möglichkeiten, deine Components zu stylen. Du kannst normales CSS im Style-feld des Components definieren, oder du kannst TailwindCSS direkt im Template verwenden. Components, die TailwindCSS verwenden, werden nur auf Seiten, wo tailwindcss aktiviert ist, korrekt gerendert.

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

Formular-struktur

Hier definierst du die Struktur der Daten, die du bei der Verwendung dieses Components bearbeiten kannst. Diese Daten kannst du direkt im Pagebuilder bearbeiten. Hier ist ein Beispiel mit zwei Textfeldern:

{
    "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"
            }
        }
    ]
}

So sieht das ganze dann im Pagebuilder aus:

Label

Das Label wird über des formulars in Pagebuilder angezeigt. Deshalb solltest du dieses Label in Deutsch und Englisch definieren, weil das neleto Admin-UI zwischen diesen Sprachend wechseln kann.

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

Properties

Hier definierst du das Formular mit dem du die Daten jedes Elements anpassen kannst. Jedes Eingabefeld hier entspricht einem Wert in den Daten des Elements, die dann im Template dieses Components verwendet werden können. Das Formular wird im Pagebuilder auf der rechten Seite angezeigt, wenn du ein Element ausgewählt hast, oder, auf Geräten mit kleinerem Bildschirm, unter dem Tab Auswahl auf der linken Seite.