Übersicht

Dialog-Aufbau und Bausteine #

Alle Plugin-Dialoge folgen demselben Aufbau, damit sie sich für den Anwender gleich anfühlen. Die Struktur liefert die eul-app-Komponente mit benannten Slots.

Standard-Aufbau #

• Kopfleiste (oben) mit Logo und App-Titel links; rechts die Aktionsleiste mit den globalen Aktionen, in dieser Reihenfolge: Nachrichten-Verlauf, Sprachumschaltung, Über (About), Theme Automatisch / Hell / Dunkel.
• Seitenleiste (links) mit der Navigationsleiste (eul-sidebar + eul-page): die Hauptpunkte des Plugins. Bei wenigen Seiten alternativ eul-ribbon (Reiter oben statt Sidebar).
• Inhalt je Seite: ein statischer Teil (z.B. die Quell-/Filterzeile) und - nur wenn nötig
  • Tabs (eul-tabs, rein CSS-basiert) für weitere Optionen.
• Statusleiste (unten) mit Statustext und Schließen-Button.

<eul-app>
  <header slot="header">
    <eul-image slot="logo" src="eulimg/eulanda-logo.png" width="32" height="32"></eul-image>
    <h1 slot="title" data-i18n="app.title">{{app.title}}</h1>
    <div slot="actions">
      <eul-row gap="2">
        <!-- Nachrichten-Verlauf, Sprachumschaltung, About, Theme (auto/hell/dunkel) -->
      </eul-row>
    </div>
  </header>

  <eul-sidebar slot="body">
    <nav slot="nav">
      <a data-page="page-start" active><eul-icon name="file" size="14"></eul-icon> Start</a>
      <a data-page="page-statistik"><eul-icon name="info" size="14"></eul-icon> Statistik</a>
    </nav>

    <eul-page id="page-start" active>
      <eul-card><!-- statischer Teil: Quelle/Filter --></eul-card>
      <eul-card><eul-grid id="gResults" search pagination sort></eul-grid></eul-card>
    </eul-page>
    <eul-page id="page-statistik"><!-- ... --></eul-page>
  </eul-sidebar>
</eul-app>

So sehen die Zonen in einem echten Plugin (EulandaXdatanorm) aus - die jeweils erklärte Zone ist hell, der Rest abgedunkelt:

Aktionsleiste oben rechts: Nachrichten-Verlauf, Sprache, Über, Theme.

Seitenleiste mit der Navigationsleiste - die Hauptpunkte (Übersicht, Statistik, Filter, …).

Tabs (eul-tabs) gliedern Optionen innerhalb einer Seite.

Statusleiste unten mit Ergebnistext und Schließen-Button.

Regeln (Auszug aus der internen Plugin-UI-Guideline):

• Seiten-IDs immer id="page-<name>" in Kleinbuchstaben; genau die erste Seite trägt active.
• Tabs nur für Optionen innerhalb einer Seite; übergeordnete Bereiche sind eigene Seiten.
• Externe Links nie als href, sondern über die _help-Action (siehe WebView2 in PowerShell).

Die Bausteine (eul-*-Komponenten) #

Die Komponenten kommen aus dem EulandaXtools-Bundle. Sie lazy verwenden (das Plugin-Skript lädt vor dem Bundle) und nicht lokal nachbauen.

Live-Galerie: Show-EulWebUiStyleguide öffnet einen Dialog, der alle Komponenten mit Theme-Umschalter zeigt - die beste Referenz für Aussehen und Verhalten.

Beispiele aus einem echten Plugin (EulandaXdatanorm):

eul-tree mit Echtzeitsuche: die Eingabe filtert den Baum sofort.

eul-grid: filterbare Übersicht, Befunde farblich hervorgehoben (hier Warnungen).

About-Box über Get-EulModuleAboutInfo: Hersteller, Pfad, Abhängigkeiten mit benötigter und geladener Version.

Status als Toast (EulUI.toast) - zusätzlich in der Statusleiste und im Nachrichten-Verlauf.

Wiederkehrende Muster #

• About-Box: immer über Get-EulModuleAboutInfo (liefert Vendor.Name, Path, RequiredVersion/LoadedVersion, Dependencies, Copyright, LogoDataUri). Markup und Rendering sind im Quellrepo als Copy-Paste-Rezept festgelegt; das Logo kommt aus EulandaXtools, das Plugin liefert keine eigene Bilddatei.

• Lokalisierung (i18n): Plugin-Strings als lib/i18n/<lang>.xml (<s key="...">Text</s>), geladen über Get-EulPluginStrings. Sichtbare Texte tragen data-i18n/data-i18n-title/ data-i18n-placeholder und werden bei Sprachwechsel neu angewandt.

• Status, Toast, Busy: setStatus(msg, variant, timeout) schreibt in die Statusleiste und zeigt einen Toast; ein Busy-Overlay mit Zähler verhindert vorzeitiges Ausblenden.

• Legende (Codes/Begriffe erklären): Wo eine Spalte technische Codes zeigt (Status, Typ, Aktion), gehören in die Anzeige übersetzte Begriffe und zusätzlich eine Legende, die den Begriff, eine Kurzerklärung und den technischen Code (kursiv, am Zeilenende) zeigt. Damit alle Gruppen bündig sind, ein gemeinsames Grid statt mehrerer Tabellen verwenden:

  .eul-legend { display:grid; grid-template-columns:max-content 1fr max-content; gap:4px 16px; align-items:baseline; }
  .eul-legend-head { grid-column:1 / -1; font-weight:600; }
  .eul-legend-term { font-weight:600; white-space:nowrap; }
  .eul-legend-desc { color:var(--color-text-muted); }
  .eul-legend-code { font-style:italic; color:var(--color-text-subtle); white-space:nowrap; text-align:right; }
  

  Die Erklärungen liegen lokalisiert im Plugin-i18n. Wird das Muster in mehreren Plugins gebraucht, wird es als Standard-Element nach EulandaXtools gehoben (analog zur About-Box).