Zum Inhalt springen
TRFX.DE
Adresse

Komponenten

Jedes Beispiel ist echtes HTML. Unter jedem Beispiel liegt der Quelltext zum Aufklappen und Kopieren. Wechseln Sie oben das Design, um dieselbe Komponente in allen Varianten zu sehen.

Schaltflächen

Eine Schaltfläche pro Dialog ist die Standardaktion (is-default). Sie reagiert auf Enter. Deaktivierte Schaltflächen bleiben sichtbar, sagen aber nichts mehr.

Zustände

Link als Schaltfläche
HTML-Code 
<div class="lg-row">
  <button type="button" class="lg-btn">Normal</button>
  <button type="button" class="lg-btn is-default">Standard</button>
  <button type="button" class="lg-btn is-pressed">Gedrückt</button>
  <button type="button" class="lg-btn" disabled>Deaktiviert</button>
  <button type="button" class="lg-btn lg-btn--sm">Klein</button>
  <a class="lg-btn" href="#schaltflaechen">Link als Schaltfläche</a>
</div>

Mit Symbol und als Umschalter

HTML-Code 
<div class="lg-row">
  <button type="button" class="lg-btn"><svg class="lg-icon" aria-hidden="true"><use href="#i-download"/></svg>Herunterladen</button>
  <button type="button" class="lg-btn"><svg class="lg-icon" aria-hidden="true"><use href="#i-printer"/></svg>Drucken</button>
  <button type="button" class="lg-btn" aria-pressed="false" id="umschalter">Umschalter: aus</button>
</div>

Eingabefelder

Felder sind vertieft, weiß und eckig. Die Beschriftung steht darüber, Hinweise darunter. Fehler nennen das Problem und stehen direkt am Feld.

Nur Buchstaben, Ziffern und Punkt.
Das Kennwort ist zu kurz. Mindestens 8 Zeichen.
HTML-Code 
<div class="lg-grid lg-grid--2">
  <div>
    <div class="lg-field">
      <label for="f-name">Benutzername</label>
      <input class="lg-input" id="f-name" type="text" autocomplete="off" placeholder="z. B. max.muster">
      <span class="lg-hint">Nur Buchstaben, Ziffern und Punkt.</span>
    </div>
    <div class="lg-field">
      <label for="f-pass">Kennwort</label>
      <input class="lg-input" id="f-pass" type="password" autocomplete="off" aria-invalid="true" aria-describedby="f-pass-e" value="123">
      <span class="lg-error" id="f-pass-e">Das Kennwort ist zu kurz. Mindestens 8 Zeichen.</span>
    </div>
    <div class="lg-field">
      <label for="f-dis">Gesperrt</label>
      <input class="lg-input" id="f-dis" type="text" value="Nur lesbar" disabled>
    </div>
  </div>
  <div>
    <div class="lg-field">
      <label for="f-sel">Dateityp</label>
      <span class="lg-select-wrap">
        <select class="lg-select" id="f-sel">
          <option>Textdokument (*.txt)</option>
          <option>Tabelle (*.csv)</option>
          <option>Alle Dateien (*.*)</option>
        </select>
      </span>
    </div>
    <div class="lg-field">
      <label for="f-text">Bemerkung</label>
      <textarea class="lg-textarea" id="f-text" rows="3">Mehrzeiliger Text. Die Größe lässt sich nach unten ziehen.</textarea>
    </div>
  </div>
</div>

Kontrollkästchen und Optionsfelder

Ein Gruppenfeld (fieldset mit legend) fasst zusammengehörige Auswahl zusammen und gibt Screenreadern den Kontext.

Anzeige
Sortierung
HTML-Code 
<div class="lg-grid lg-grid--2">
  <fieldset class="lg-group">
    <legend>Anzeige</legend>
    <label class="lg-check"><input type="checkbox" checked><span>Dateiendungen anzeigen</span></label>
    <label class="lg-check"><input type="checkbox"><span>Versteckte Dateien anzeigen</span></label>
    <label class="lg-check"><input type="checkbox" disabled><span>Systemdateien (gesperrt)</span></label>
  </fieldset>
  <fieldset class="lg-group">
    <legend>Sortierung</legend>
    <label class="lg-check"><input type="radio" name="sort" checked><span>Nach Name</span></label>
    <label class="lg-check"><input type="radio" name="sort"><span>Nach Größe</span></label>
    <label class="lg-check"><input type="radio" name="sort"><span>Nach Datum</span></label>
  </fieldset>
</div>

Reiter

Bedienbar mit Maus und Pfeiltasten. Ohne JavaScript sind alle Panels sichtbar, nichts geht verloren.

System: TRFX Legacy 1.0
Registriert für: Alle, die es brauchen

Verbunden. Geschwindigkeit: 100 MBit/s. Gesendet und empfangen: keine Beanstandungen.

Hier stehen die Einstellungen, die man selten braucht und trotzdem finden will.

HTML-Code 
<div data-lg-tabs>
  <ul class="lg-tablist" role="tablist" aria-label="Eigenschaften von Computer">
    <li role="presentation"><button type="button" class="lg-tab" role="tab" id="tab-a" aria-controls="pan-a" aria-selected="true">Allgemein</button></li>
    <li role="presentation"><button type="button" class="lg-tab" role="tab" id="tab-b" aria-controls="pan-b" aria-selected="false">Netzwerk</button></li>
    <li role="presentation"><button type="button" class="lg-tab" role="tab" id="tab-c" aria-controls="pan-c" aria-selected="false">Erweitert</button></li>
  </ul>
  <div class="lg-tabpanel" role="tabpanel" id="pan-a" aria-labelledby="tab-a">
    <p><strong>System:</strong> TRFX Legacy 1.0<br><strong>Registriert für:</strong> Alle, die es brauchen</p>
  </div>
  <div class="lg-tabpanel" role="tabpanel" id="pan-b" aria-labelledby="tab-b">
    <p>Verbunden. Geschwindigkeit: 100 MBit/s. Gesendet und empfangen: keine Beanstandungen.</p>
  </div>
  <div class="lg-tabpanel" role="tabpanel" id="pan-c" aria-labelledby="tab-c">
    <p>Hier stehen die Einstellungen, die man selten braucht und trotzdem finden will.</p>
  </div>
</div>

Tabellen

Die Detailansicht des Explorers: Spaltenköpfe sehen aus wie Schaltflächen, Zahlen stehen rechts. Mit data-lg-selectable lässt sich eine Zeile auswählen (Klick, Enter oder Leertaste).

Inhalt von C:\Dokumente
NameTypGrößeGeändert
ArchivOrdner–03.11.2026
bericht.docTextdokument48 KB12.11.2026
kosten.xlsTabelle112 KB09.11.2026
notizen.txtTextdatei2 KB01.11.2026
HTML-Code 
<div class="lg-scroll">
  <table class="lg-table" data-lg-selectable>
    <caption>Inhalt von C:\Dokumente</caption>
    <thead><tr><th scope="col">Name</th><th scope="col">Typ</th><th scope="col" class="lg-num">Größe</th><th scope="col">Geändert</th></tr></thead>
    <tbody>
      <tr><td><svg class="lg-icon" aria-hidden="true"><use href="#i-folder"/></svg> Archiv</td><td>Ordner</td><td class="lg-num">–</td><td>03.11.2026</td></tr>
      <tr><td><svg class="lg-icon" aria-hidden="true"><use href="#i-doc"/></svg> bericht.doc</td><td>Textdokument</td><td class="lg-num">48 KB</td><td>12.11.2026</td></tr>
      <tr><td><svg class="lg-icon" aria-hidden="true"><use href="#i-doc"/></svg> kosten.xls</td><td>Tabelle</td><td class="lg-num">112 KB</td><td>09.11.2026</td></tr>
      <tr><td><svg class="lg-icon" aria-hidden="true"><use href="#i-doc"/></svg> notizen.txt</td><td>Textdatei</td><td class="lg-num">2 KB</td><td>01.11.2026</td></tr>
    </tbody>
  </table>
</div>

Variante mit Zebrastreifen (lg-table--zebra) für dichte Daten

DienstStatusAntwortzeit
AnmeldungLäuft42 ms
DatenbankLangsam380 ms
MailAusgefallen–
DateienLäuft57 ms
HTML-Code 
<div class="lg-scroll">
  <table class="lg-table lg-table--zebra">
    <thead><tr><th scope="col">Dienst</th><th scope="col">Status</th><th scope="col" class="lg-num">Antwortzeit</th></tr></thead>
    <tbody>
      <tr><td>Anmeldung</td><td><span class="lg-led lg-led--ok">Läuft</span></td><td class="lg-num">42 ms</td></tr>
      <tr><td>Datenbank</td><td><span class="lg-led lg-led--warn">Langsam</span></td><td class="lg-num">380 ms</td></tr>
      <tr><td>Mail</td><td><span class="lg-led lg-led--err">Ausgefallen</span></td><td class="lg-num">–</td></tr>
      <tr><td>Dateien</td><td><span class="lg-led lg-led--ok">Läuft</span></td><td class="lg-num">57 ms</td></tr>
    </tbody>
  </table>
</div>

Fortschritt

Echte <progress>-Elemente, damit Hilfstechniken den Wert kennen. Für unbekannte Dauer gibt es den wandernden Block. Er steht still, wenn das System „Bewegung reduzieren“ meldet.

0 % kopiert

0 %

Verbindung wird hergestellt …

HTML-Code 
<div class="lg-stack" data-lg-progress-demo>
  <div>
    <p id="pr-label" data-lg-progress-label>0 % kopiert</p>
    <progress class="lg-progress" value="0" max="100" aria-labelledby="pr-label">0 %</progress>
  </div>
  <button type="button" class="lg-btn">Kopieren starten</button>
  <div>
    <p id="pr-wait">Verbindung wird hergestellt …</p>
    <div class="lg-marquee" role="progressbar" aria-labelledby="pr-wait"></div>
  </div>
</div>

Meldungen

Zwei Formen: der Hinweisblock (lg-notice) steht im Text, das Meldungsfenster (lg-window mit lg-msg) steht für sich.

Hinweisblöcke

Information. Die Sicherung läuft jeden Tag um 02:00 Uhr.

Gespeichert. Ihre Änderungen wurden übernommen.

Achtung. Auf Laufwerk C: sind nur noch 2 % frei.

HTML-Code 
<div class="lg-notice">
  <svg class="lg-icon lg-icon--lg" aria-hidden="true"><use href="#i-info"/></svg>
  <div><p><strong>Information.</strong> Die Sicherung läuft jeden Tag um 02:00 Uhr.</p></div>
</div>
<div class="lg-notice lg-notice--ok">
  <svg class="lg-icon lg-icon--lg" aria-hidden="true"><use href="#i-ok"/></svg>
  <div><p><strong>Gespeichert.</strong> Ihre Änderungen wurden übernommen.</p></div>
</div>
<div class="lg-notice lg-notice--warn">
  <svg class="lg-icon lg-icon--lg" aria-hidden="true"><use href="#i-warn"/></svg>
  <div><p><strong>Achtung.</strong> Auf Laufwerk C: sind nur noch 2 % frei.</p></div>
</div>
<div class="lg-notice lg-notice--err" role="alert">
  <svg class="lg-icon lg-icon--lg" aria-hidden="true"><use href="#i-error"/></svg>
  <div><p><strong>Fehler.</strong> Die Datei konnte nicht gelesen werden. Prüfen Sie, ob sie noch geöffnet ist.</p></div>
</div>

Meldungsfenster

Hinweis

Der Vorgang wurde abgeschlossen.

Fehler

Der Server antwortet nicht. Versuchen Sie es später noch einmal.

HTML-Code 
<div class="lg-grid lg-grid--2">
  <div class="lg-window lg-window--flat" role="group" aria-labelledby="mw-1">
    <div class="lg-window__title"><span class="lg-window__text" id="mw-1">Hinweis</span><span class="lg-window__ctl" aria-hidden="true"><span></span><span></span><span></span></span></div>
    <div class="lg-window__body">
      <div class="lg-msg"><svg class="lg-icon lg-icon--lg lg-msg__icon" aria-hidden="true"><use href="#i-info"/></svg><div class="lg-msg__text"><p>Der Vorgang wurde abgeschlossen.</p></div></div>
    </div>
    <div class="lg-window__foot"><div class="lg-actions"><button type="button" class="lg-btn is-default">OK</button></div></div>
  </div>
  <div class="lg-window lg-window--flat" role="group" aria-labelledby="mw-2">
    <div class="lg-window__title"><span class="lg-window__text" id="mw-2">Fehler</span><span class="lg-window__ctl" aria-hidden="true"><span></span><span></span><span></span></span></div>
    <div class="lg-window__body">
      <div class="lg-msg"><svg class="lg-icon lg-icon--lg lg-msg__icon" aria-hidden="true"><use href="#i-error"/></svg><div class="lg-msg__text"><p>Der Server antwortet nicht. Versuchen Sie es später noch einmal.</p></div></div>
    </div>
    <div class="lg-window__foot"><div class="lg-actions"><button type="button" class="lg-btn is-default">Wiederholen</button><button type="button" class="lg-btn">Abbrechen</button></div></div>
  </div>
</div>

Dialoge

Basiert auf dem nativen <dialog>. Der Browser sperrt den Rest der Seite, hält den Fokus im Dialog und schließt mit Esc.

Noch keine Antwort.

Löschen bestätigen

Soll „bericht.doc“ in den Papierkorb verschoben werden?
Anmelden

Geben Sie Benutzername und Kennwort ein. Dies ist nur ein Beispiel, nichts wird gesendet.
HTML-Code 
<div class="lg-row">
  <button type="button" class="lg-btn" data-lg-open="dlg-loeschen">Frage stellen</button>
  <button type="button" class="lg-btn" data-lg-open="dlg-anmelden">Anmelden …</button>
</div>
<p class="lg-small lg-muted" id="dlg-loeschen-result" aria-live="polite">Noch keine Antwort.</p>

<dialog class="lg-dialog lg-window" id="dlg-loeschen" aria-labelledby="dlg-loeschen-t">
  <div class="lg-window__title"><svg class="lg-icon" aria-hidden="true"><use href="#i-question"/></svg><span class="lg-window__text" id="dlg-loeschen-t">Löschen bestätigen</span><span class="lg-window__ctl" aria-hidden="true"><span></span><span></span><span></span></span></div>
  <div class="lg-window__body">
    <div class="lg-msg"><svg class="lg-icon lg-icon--lg lg-msg__icon" aria-hidden="true"><use href="#i-question"/></svg><div class="lg-msg__text"><p>Soll „bericht.doc“ in den Papierkorb verschoben werden?</p></div></div>
  </div>
  <div class="lg-window__foot"><div class="lg-actions">
    <button type="button" class="lg-btn is-default" data-lg-close="Ja" autofocus>Ja</button>
    <button type="button" class="lg-btn" data-lg-close="Nein">Nein</button>
    <button type="button" class="lg-btn" data-lg-close="Abbrechen">Abbrechen</button>
  </div></div>
</dialog>

<dialog class="lg-dialog lg-window" id="dlg-anmelden" aria-labelledby="dlg-anmelden-t">
  <div class="lg-window__title"><svg class="lg-icon" aria-hidden="true"><use href="#i-lock"/></svg><span class="lg-window__text" id="dlg-anmelden-t">Anmelden</span><span class="lg-window__ctl" aria-hidden="true"><span></span><span></span><span></span></span></div>
  <form method="dialog" class="lg-window__body">
    <div class="lg-msg">
      <svg class="lg-icon lg-icon--xl lg-msg__icon" aria-hidden="true"><use href="#i-key"/></svg>
      <div class="lg-msg__text">
        <p>Geben Sie Benutzername und Kennwort ein. Dies ist nur ein Beispiel, nichts wird gesendet.</p>
        <div class="lg-field"><label for="dl-user">Benutzername</label><input class="lg-input" id="dl-user" type="text" autocomplete="off"></div>
        <div class="lg-field"><label for="dl-pass">Kennwort</label><input class="lg-input" id="dl-pass" type="password" autocomplete="off"></div>
        <div class="lg-actions"><button class="lg-btn is-default" value="Anmelden">Anmelden</button><button class="lg-btn" value="Abbrechen" formnovalidate>Abbrechen</button></div>
      </div>
    </div>
  </form>
</dialog>

Symbolleiste

HTML-Code 
<div class="lg-toolbar" role="toolbar" aria-label="Beispielwerkzeuge">
  <button type="button" class="lg-btn lg-btn--tool"><svg class="lg-icon" aria-hidden="true"><use href="#i-folder"/></svg>Öffnen</button>
  <button type="button" class="lg-btn lg-btn--tool"><svg class="lg-icon" aria-hidden="true"><use href="#i-printer"/></svg>Drucken</button>
  <span class="lg-sep" aria-hidden="true"></span>
  <button type="button" class="lg-btn lg-btn--tool"><svg class="lg-icon" aria-hidden="true"><use href="#i-search"/></svg>Suchen</button>
  <button type="button" class="lg-btn lg-btn--tool"><svg class="lg-icon" aria-hidden="true"><use href="#i-gear"/></svg>Optionen</button>
</div>

Baum und Liste

Ordner

  • Arbeitsplatz
    • Dokumente
      • bericht.doc
      • kosten.xls
    • Bilder
      • urlaub.bmp

Listenfeld

HTML-Code 
<div class="lg-grid lg-grid--2">
  <div>
    <p class="lg-label" id="tree-l">Ordner</p>
    <div class="lg-list" aria-labelledby="tree-l">
      <ul class="lg-tree">
        <li><details open><summary><svg class="lg-icon" aria-hidden="true"><use href="#i-computer"/></svg>Arbeitsplatz</summary>
          <ul>
            <li><details open><summary><svg class="lg-icon" aria-hidden="true"><use href="#i-folder"/></svg>Dokumente</summary>
              <ul>
                <li><span class="lg-leaf" aria-current="true"><svg class="lg-icon" aria-hidden="true"><use href="#i-doc"/></svg>bericht.doc</span></li>
                <li><span class="lg-leaf"><svg class="lg-icon" aria-hidden="true"><use href="#i-doc"/></svg>kosten.xls</span></li>
              </ul></details></li>
            <li><details><summary><svg class="lg-icon" aria-hidden="true"><use href="#i-folder"/></svg>Bilder</summary>
              <ul><li><span class="lg-leaf"><svg class="lg-icon" aria-hidden="true"><use href="#i-doc"/></svg>urlaub.bmp</span></li></ul></details></li>
          </ul></details></li>
      </ul>
    </div>
  </div>
  <div>
    <p class="lg-label" id="list-l">Listenfeld</p>
    <ul class="lg-list" aria-labelledby="list-l">
      <li><button type="button"><svg class="lg-icon" aria-hidden="true"><use href="#i-doc"/></svg>Eintrag eins</button></li>
      <li><button type="button" aria-selected="true"><svg class="lg-icon" aria-hidden="true"><use href="#i-doc"/></svg>Eintrag zwei (ausgewählt)</button></li>
      <li><button type="button"><svg class="lg-icon" aria-hidden="true"><use href="#i-doc"/></svg>Eintrag drei</button></li>
    </ul>
  </div>
</div>

Kurzinfo und Sprechblase

Die gelbe Kurzinfo erscheint bei Hover und Fokus über data-tip. Die Sprechblase ist für Hinweise, die stehen bleiben.

Neue Software wurde installiert. Ein Neustart kann erforderlich sein.
HTML-Code 
<div class="demo-tall">
  <p><button type="button" class="lg-btn" data-tip="Speichert das Dokument unter dem aktuellen Namen.">Mauszeiger darauf halten</button></p>
  <div class="lg-balloon" role="note">
    <svg class="lg-icon lg-icon--lg" aria-hidden="true"><use href="#i-info"/></svg>
    <div><strong>Neue Software wurde installiert.</strong> Ein Neustart kann erforderlich sein.</div>
  </div>
</div>

Statusanzeige und Statusleiste

  • In Ordnung
  • Warnung
  • Fehler
  • Information
  • Unbekannt
  • 4 Objekte
  • 162 KB
  • Arbeitsplatz
HTML-Code 
<ul class="lg-row">
  <li class="lg-led lg-led--ok">In Ordnung</li>
  <li class="lg-led lg-led--warn">Warnung</li>
  <li class="lg-led lg-led--err">Fehler</li>
  <li class="lg-led lg-led--info">Information</li>
  <li class="lg-led">Unbekannt</li>
</ul>
<ul class="lg-statusbar">
  <li>4 Objekte</li>
  <li>162 KB</li>
  <li>Arbeitsplatz</li>
</ul>

Seitenwechsel

HTML-Code 
<nav aria-label="Seiten">
  <ul class="lg-pager">
    <li><span class="is-disabled">&lt; Zurück</span></li>
    <li><a href="#seitenwechsel" aria-current="page">1</a></li>
    <li><a href="#seitenwechsel">2</a></li>
    <li><a href="#seitenwechsel">3</a></li>
    <li><a href="#seitenwechsel">Weiter &gt;</a></li>
  </ul>
</nav>

Fenster

Der Grundbaustein für alles, was zusammengehört. Die Titelleiste trägt einen Namen, optional ein Symbol. Die drei Knöpfe rechts sind Dekoration und für Hilfstechniken verborgen. Aktiv ist die normale Titelleiste, lg-window--quiet ist die inaktive.

Aktives Fenster

Die Titelleiste ist farbig.

Inaktives Fenster

Die Titelleiste ist gedämpft.

HTML-Code 
<div class="lg-grid lg-grid--2">
  <div class="lg-window" role="group" aria-labelledby="fw-1">
    <div class="lg-window__title"><svg class="lg-icon" aria-hidden="true"><use href="#i-folder"/></svg><span class="lg-window__text" id="fw-1">Aktives Fenster</span><span class="lg-window__ctl" aria-hidden="true"><span></span><span></span><span></span></span></div>
    <div class="lg-window__body"><p>Die Titelleiste ist farbig.</p></div>
  </div>
  <div class="lg-window lg-window--quiet" role="group" aria-labelledby="fw-2">
    <div class="lg-window__title"><svg class="lg-icon" aria-hidden="true"><use href="#i-folder"/></svg><span class="lg-window__text" id="fw-2">Inaktives Fenster</span><span class="lg-window__ctl" aria-hidden="true"><span></span><span></span><span></span></span></div>
    <div class="lg-window__body"><p>Die Titelleiste ist gedämpft.</p></div>
  </div>
</div>