Diseño

Dashboard Shell

El layout principal para paneles de administración. Una barra lateral de ancho fijo a la izquierda; la parte derecha contiene una barra superior fija y un área de contenido principal desplazable.

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

  <!-- Barra lateral -->
  <aside class="wb-sidebar">
    <div class="wb-sidebar-brand">
      <a href="/">Mi 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">Usuarios</a>
      <a href="/settings"  class="wb-sidebar-link">Configuración</a>
    </nav>
  </aside>

  <!-- Área principal -->
  <div class="wb-dashboard-body">

    <!-- Barra de navegación superior -->
    <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>

    <!-- Contenido desplazable -->
    <main class="wb-dashboard-main">
      <div class="wb-container">
        <h1>Título de página</h1>
      </div>
    </main>

  </div>
</div>

Colapso de barra lateral (móvil)

La barra lateral se oculta en móvil. data-wb-toggle="sidebar" en cualquier botón la abre con un overlay de fondo. WBSidebar lo gestiona automáticamente.

<!-- Menú hamburguesa en la navbar -->
<button data-wb-toggle="sidebar">☰ Menú</button>

<!-- O por JS -->
WBSidebar.open();
WBSidebar.close();

Grupos de navegación en la barra lateral

Usa wb-nav-group para secciones colapsables dentro de la barra lateral.

<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">
      Usuarios
      <svg class="wb-nav-group-chevron" ...>...</svg>
    </button>
    <div class="wb-nav-group-body">
      <a href="#" class="wb-sidebar-link">Todos los usuarios</a>
      <a href="#" class="wb-sidebar-link">Roles</a>
      <a href="#" class="wb-sidebar-link">Permisos</a>
    </div>
  </div>

  <a href="#" class="wb-sidebar-link">Configuración</a>
</nav>

<!-- Modo acordeón: cierra los grupos hermanos al abrir uno -->
<nav class="wb-sidebar-nav" data-wb-nav-group-accordion>
  ...
</nav>

Auth Shell

Layout de tarjeta centrada para páginas de inicio de sesión, registro y restablecimiento de contraseña.

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

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

    <h1 class="wb-auth-title">Inicia sesión en tu cuenta</h1>
    <p class="wb-auth-subtitle">Bienvenido de nuevo. Ingresa tus credenciales.</p>

    <form class="wb-auth-form">
      <div class="wb-field">
        <label class="wb-label">Correo electrónico</label>
        <input type="email" class="wb-input" autocomplete="email">
      </div>
      <div class="wb-field">
        <label class="wb-label">Contraseña</label>
        <input type="password" class="wb-input" autocomplete="current-password">
      </div>
      <button type="submit" class="wb-btn wb-btn-primary" style="width:100%">
        Iniciar sesión
      </button>
    </form>

    <p class="wb-auth-footer">
      ¿No tienes cuenta? <a href="/register">Regístrate</a>
    </p>

  </div>
</div>

Settings Shell

Layout de dos columnas para páginas de configuración — una navegación izquierda fija y un área de contenido. Generalmente se usa dentro del área de contenido principal del dashboard shell.

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

  <!-- Nav izquierda -->
  <nav class="wb-settings-nav">
    <a href="#profile"   class="wb-settings-nav-link is-active">Perfil</a>
    <a href="#security"  class="wb-settings-nav-link">Seguridad</a>
    <a href="#billing"   class="wb-settings-nav-link">Facturación</a>
    <a href="#team"      class="wb-settings-nav-link">Equipo</a>
  </nav>

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

    <section class="wb-settings-section" id="profile">
      <h2 class="wb-settings-title">Perfil</h2>
      <p class="wb-settings-desc">Gestiona tu información de perfil público.</p>
      <!-- campos del formulario -->
    </section>

    <section class="wb-settings-section" id="security">
      <h2 class="wb-settings-title">Seguridad</h2>
      <p class="wb-settings-desc">Actualiza tu contraseña y la configuración de 2FA.</p>
      <!-- campos del formulario -->
    </section>

  </div>
</div>

Content Shell

Layout de una columna con cabecera fija, cuerpo desplazable y pie de página opcional. Útil para páginas de detalle, formularios y editores de página completa dentro del área principal del dashboard.

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

  <div class="wb-content-header">
    <h2 class="wb-content-title">Editar usuario</h2>
    <div class="wb-content-actions">
      <button class="wb-btn wb-btn-ghost wb-btn-sm">Descartar</button>
      <button class="wb-btn wb-btn-primary wb-btn-sm">Guardar cambios</button>
    </div>
  </div>

  <div class="wb-content-body">
    <!-- formulario / contenido aquí -->
  </div>

  <div class="wb-content-footer">
    <!-- paginación / estado opcionales -->
  </div>

</div>

Contenedor & Sección

Restricción básica de ancho de contenido y ayudantes de espaciado vertical.

<!-- Limitar ancho del contenido -->
<div class="wb-container">
  ...
</div>

<!-- Contenido estrecho (formularios, artículos) -->
<div class="wb-container-sm">
  ...
</div>

<!-- Espaciado vertical de sección -->
<section class="wb-section">
  <div class="wb-container">
    ...
  </div>
</section>

<!-- Layout en pila -->
<div class="wb-stack">
  <div class="wb-field">...</div>
  <div class="wb-field">...</div>
  <button class="wb-btn wb-btn-primary">Enviar</button>
</div>

Navbar

Barra de navegación superior fija. Se puede usar de forma independiente (página de inicio) o como barra superior dentro de un dashboard shell.

<header class="wb-navbar">
  <!-- Marca -->
  <a href="/" class="wb-navbar-brand">Mi App</a>

  <!-- Links de navegación -->
  <nav class="wb-navbar-nav">
    <a href="#" class="wb-navbar-link is-active">Dashboard</a>
    <a href="#" class="wb-navbar-link">Reportes</a>
    <a href="#" class="wb-navbar-link">Configuración</a>
  </nav>

  <!-- Lado derecho -->
  <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">Mi perfil</a>
        <a href="#" class="wb-dropdown-item">Configuración</a>
        <div class="wb-dropdown-divider"></div>
        <a href="/logout" class="wb-dropdown-item wb-dropdown-item-danger">Cerrar sesión</a>
      </div>
    </div>
  </div>
</header>

Toolbar

Barra horizontal para acciones a nivel de página — normalmente colocada entre el título de la página y la tabla de contenido.

<div class="wb-toolbar">
  <div class="wb-toolbar-start">
    <h2 class="wb-toolbar-title">Usuarios <span class="wb-badge">248</span></h2>
  </div>
  <div class="wb-toolbar-end">
    <button class="wb-btn wb-btn-outline wb-btn-sm">Exportar</button>
    <button class="wb-btn wb-btn-primary wb-btn-sm">+ Nuevo usuario</button>
  </div>
</div>

<!-- Barra de acciones masivas (mostrada cuando se seleccionan filas) -->
<div class="wb-toolbar wb-toolbar-bulk">
  <span>3 seleccionados</span>
  <button class="wb-btn wb-btn-danger wb-btn-sm">Eliminar selección</button>
</div>

Paleta de comandos

Overlay de búsqueda/comando a pantalla completa activado por Cmd+K / Ctrl+K. Regístralo una vez; WebBlocks gestiona el teclado, la búsqueda y la navegación.

<!-- 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="Buscar o escribir un comando…">
      <kbd class="wb-cmd-esc">Esc</kbd>
    </div>
    <div class="wb-cmd-results">
      <div class="wb-cmd-group">
        <div class="wb-cmd-group-label">Páginas</div>
        <a href="/dashboard" class="wb-cmd-result">Dashboard</a>
        <a href="/users"     class="wb-cmd-result">Usuarios</a>
        <a href="/settings"  class="wb-cmd-result">Configuración</a>
      </div>
    </div>
  </div>
</div>

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

Consulta la página de JavaScript API para ver todas las opciones de register() incluyendo onSearch.