Layouts

Dashboard-Shell

Das primäre Admin-Panel-Layout. Eine Sidebar mit fester Breite sitzt links; die rechte Seite enthält eine klebende Topbar und einen scrollbaren Hauptinhaltsbereich.

<div class="wb-dashboard-shell">

  <!-- Sidebar -->
  <aside class="wb-sidebar">
    <div class="wb-sidebar-brand">
      <a href="/">Meine App</a>
    </div>
    <nav class="wb-sidebar-nav">
      <a href="/dashboard" class="wb-sidebar-link is-active">Dashboard</a>
      <a href="/users"     class="wb-sidebar-link">Benutzer</a>
      <a href="/settings"  class="wb-sidebar-link">Einstellungen</a>
    </nav>
  </aside>

  <!-- Hauptbereich -->
  <div class="wb-dashboard-body">

    <!-- Obere Navigationsleiste -->
    <header class="wb-navbar">
      <button class="wb-btn wb-btn-ghost wb-btn-sm"
              data-wb-toggle="sidebar">☰</button>
      <div style="flex:1"></div>
      <span class="wb-avatar wb-avatar-sm">JD</span>
    </header>

    <!-- Scrollbarer Inhalt -->
    <main class="wb-dashboard-main">
      <div class="wb-container">
        <h1>Seitentitel</h1>
      </div>
    </main>

  </div>
</div>

Sidebar einklappen (mobil)

Die Sidebar wird auf Mobilgeräten ausgeblendet. data-wb-toggle="sidebar" auf einem beliebigen Button öffnet sie mit einem Hintergrundoverlay. WBSidebar handhabt dies automatisch.

<!-- Hamburger in der Navbar -->
<button data-wb-toggle="sidebar">☰ Menü</button>

<!-- Oder per JS -->
WBSidebar.open();
WBSidebar.close();

Sidebar-Navigationsgruppen

Verwende wb-nav-group für einklappbare Abschnitte innerhalb der Sidebar.

<nav class="wb-sidebar-nav">
  <a href="#" class="wb-sidebar-link is-active">Dashboard</a>

  <div class="wb-nav-group">
    <button class="wb-nav-group-trigger">
      Benutzer
      <svg class="wb-nav-group-chevron" ...>...</svg>
    </button>
    <div class="wb-nav-group-body">
      <a href="#" class="wb-sidebar-link">Alle Benutzer</a>
      <a href="#" class="wb-sidebar-link">Rollen</a>
      <a href="#" class="wb-sidebar-link">Berechtigungen</a>
    </div>
  </div>

  <a href="#" class="wb-sidebar-link">Einstellungen</a>
</nav>

<!-- Akkordeon-Modus: schließt Geschwistergruppen, wenn eine öffnet -->
<nav class="wb-sidebar-nav" data-wb-nav-group-accordion>
  ...
</nav>

Auth-Shell

Zentriertes Karten-Layout für Login-, Registrierungs- und Passwort-Zurücksetzen-Seiten.

<div class="wb-auth">
  <div class="wb-auth-card">

    <div class="wb-auth-logo">
      <!-- Logo hier -->
    </div>

    <h1 class="wb-auth-title">Bei deinem Konto anmelden</h1>
    <p class="wb-auth-subtitle">Willkommen zurück. Gib deine Anmeldedaten ein.</p>

    <form class="wb-auth-form">
      <div class="wb-field">
        <label class="wb-label">E-Mail</label>
        <input type="email" class="wb-input" autocomplete="email">
      </div>
      <div class="wb-field">
        <label class="wb-label">Passwort</label>
        <input type="password" class="wb-input" autocomplete="current-password">
      </div>
      <button type="submit" class="wb-btn wb-btn-primary" style="width:100%">
        Anmelden
      </button>
    </form>

    <p class="wb-auth-footer">
      Noch kein Konto? <a href="/register">Registrieren</a>
    </p>

  </div>
</div>

Einstellungs-Shell

Zweispaltiges Layout für Einstellungsseiten — eine klebende linke Navigation und ein Inhaltsbereich. Häufig innerhalb des Hauptinhaltsbereichs der Dashboard-Shell verwendet.

<div class="wb-settings-shell">

  <!-- Linke Navigation -->
  <nav class="wb-settings-nav">
    <a href="#profile"   class="wb-settings-nav-link is-active">Profil</a>
    <a href="#security"  class="wb-settings-nav-link">Sicherheit</a>
    <a href="#billing"   class="wb-settings-nav-link">Abrechnung</a>
    <a href="#team"      class="wb-settings-nav-link">Team</a>
  </nav>

  <!-- Inhalt -->
  <div class="wb-settings-body">

    <section class="wb-settings-section" id="profile">
      <h2 class="wb-settings-title">Profil</h2>
      <p class="wb-settings-desc">Öffentliche Profilinformationen verwalten.</p>
      <!-- Formularfelder -->
    </section>

    <section class="wb-settings-section" id="security">
      <h2 class="wb-settings-title">Sicherheit</h2>
      <p class="wb-settings-desc">Passwort und 2FA-Einstellungen aktualisieren.</p>
      <!-- Formularfelder -->
    </section>

  </div>
</div>

Inhalts-Shell

Einspaltiges Layout mit klebender Kopfzeile, scrollbarem Inhalt und optionaler Fußzeile. Nützlich für Detailseiten, Formulare und Vollagenreditoren im Dashboard-Hauptbereich.

<div class="wb-content-shell">

  <div class="wb-content-header">
    <h2 class="wb-content-title">Benutzer bearbeiten</h2>
    <div class="wb-content-actions">
      <button class="wb-btn wb-btn-ghost wb-btn-sm">Verwerfen</button>
      <button class="wb-btn wb-btn-primary wb-btn-sm">Änderungen speichern</button>
    </div>
  </div>

  <div class="wb-content-body">
    <!-- Formular / Inhalt hier -->
  </div>

  <div class="wb-content-footer">
    <!-- optionale Paginierung / Status -->
  </div>

</div>

Container & Abschnitt

Einfache Inhaltsbreiten-Beschränkung und vertikale Abstands-Hilfsklassen.

<!-- Inhaltsbreite begrenzen -->
<div class="wb-container">
  ...
</div>

<!-- Schmaler Inhalt (Formulare, Artikel) -->
<div class="wb-container-sm">
  ...
</div>

<!-- Vertikaler Abstand -->
<section class="wb-section">
  <div class="wb-container">
    ...
  </div>
</section>

<!-- Stapel-Layout -->
<div class="wb-stack">
  <div class="wb-field">...</div>
  <div class="wb-field">...</div>
  <button class="wb-btn wb-btn-primary">Absenden</button>
</div>

Navbar

Klebende obere Navigationsleiste. Kann eigenständig (Landing Page) oder als Topbar innerhalb einer Dashboard-Shell verwendet werden.

<header class="wb-navbar">
  <!-- Marke -->
  <a href="/" class="wb-navbar-brand">Meine App</a>

  <!-- Nav-Links -->
  <nav class="wb-navbar-nav">
    <a href="#" class="wb-navbar-link is-active">Dashboard</a>
    <a href="#" class="wb-navbar-link">Berichte</a>
    <a href="#" class="wb-navbar-link">Einstellungen</a>
  </nav>

  <!-- Rechte Seite -->
  <div class="wb-navbar-end">
    <button class="docs-mode-btn" data-wb-mode-cycle>...</button>
    <div class="wb-dropdown">
      <button class="wb-avatar wb-avatar-sm" data-wb-toggle="dropdown">JD</button>
      <div class="wb-dropdown-menu">
        <a href="#" class="wb-dropdown-item">Mein Profil</a>
        <a href="#" class="wb-dropdown-item">Einstellungen</a>
        <div class="wb-dropdown-divider"></div>
        <a href="/logout" class="wb-dropdown-item wb-dropdown-item-danger">Abmelden</a>
      </div>
    </div>
  </div>
</header>

Toolbar

Horizontale Leiste für seitenweite Aktionen — typischerweise zwischen dem Seitentitel und der Inhaltstabelle platziert.

<div class="wb-toolbar">
  <div class="wb-toolbar-start">
    <h2 class="wb-toolbar-title">Benutzer <span class="wb-badge">248</span></h2>
  </div>
  <div class="wb-toolbar-end">
    <button class="wb-btn wb-btn-outline wb-btn-sm">Exportieren</button>
    <button class="wb-btn wb-btn-primary wb-btn-sm">+ Neuer Benutzer</button>
  </div>
</div>

<!-- Massenaktionsleiste (angezeigt wenn Zeilen ausgewählt sind) -->
<div class="wb-toolbar wb-toolbar-bulk">
  <span>3 ausgewählt</span>
  <button class="wb-btn wb-btn-danger wb-btn-sm">Auswahl löschen</button>
</div>

Command-Palette

Vollbild-Such-/Befehls-Overlay, ausgelöst durch Cmd+K / Ctrl+K. Einmal registrieren; WebBlocks übernimmt Tastatur, Suche und Navigation.

<!-- HTML -->
<div class="wb-cmd-backdrop" id="my-cmd">
  <div class="wb-cmd-dialog">
    <div class="wb-cmd-header">
      <svg class="wb-cmd-search-icon">...</svg>
      <input type="text" class="wb-cmd-input" placeholder="Suchen oder Befehl eingeben…">
      <kbd class="wb-cmd-esc">Esc</kbd>
    </div>
    <div class="wb-cmd-results">
      <div class="wb-cmd-group">
        <div class="wb-cmd-group-label">Seiten</div>
        <a href="/dashboard" class="wb-cmd-result">Dashboard</a>
        <a href="/users"     class="wb-cmd-result">Benutzer</a>
        <a href="/settings"  class="wb-cmd-result">Einstellungen</a>
      </div>
    </div>
  </div>
</div>

<!-- JS -->
<script>
WBCommandPalette.register('#my-cmd');
</script>

Alle register()-Optionen einschließlich onSearch findest du auf der JavaScript-API-Seite.