Layout

Der Widget Builder verwendet drei Kerntechnologien zur Erstellung von Widget-Layouts. Zusammen ermöglichen sie es Ihnen, alles von einer einfachen Textanzeige bis hin zu einem vollständig interaktiven, datengesteuerten Widget zu erstellen.

Technologien

Technologie	Zweck	Mehr erfahren
HTML	Strukturieren Sie den Inhalt Ihres Widgets mit Standard-HTML-Elementen	HTML-Leitfaden
Handlebars	Fügen Sie dynamische Inhalte, Bedingungen, Schleifen und Datenbindung hinzu	Handlebars-Leitfaden
Tailwind CSS	Gestalten Sie Ihr Widget mit Utility-First-CSS-Klassen	Tailwind CSS-Leitfaden

Layout-Kontext

Ihr Widget-Layout hat Zugriff auf verschiedene Datenobjekte -- Einstellungen, API-Antwortdaten, Benutzerinformationen, Seitenkontext und benutzerdefinierte Variablen. Siehe die Referenz zum Layout-Kontext für alle verfügbaren Eigenschaften.

Schnellbeispiel

Hier ist ein minimales Widget-Layout, das alle drei Technologien kombiniert:

<div class="p-4 bg-white rounded-lg shadow">
  <h2 class="text-lg font-bold text-gray-800">
    {{t "greeting"}} {{user.firstName}}!
  </h2>

  {{#if data}}
    <ul class="mt-2 space-y-1">
      {{#each data}}
        <li class="text-sm text-gray-600">{{this.name}}</li>
      {{/each}}
    </ul>
  {{else}}
    <p class="text-sm text-gray-500">{{t "noData"}}</p>
  {{/if}}
</div>