Categoría · Widgets Nivel de Dificultad · Avanzado Publicado el · 22 de agosto de 2025

Widgets de Panel Interactivo

Panel moderno con widgets arrastrables y redimensionables y visualización de datos en tiempo real, perfecto para paneles de administración e interfaces de análisis.

#dashboard #widgets #arrastrar y soltar #charts #analytics

Diseño Responsivo

Soporte para Modo Oscuro

No

líneas

709

Compatibilidad del Navegador

Chrome · Firefox · Safari · Edge

Vista Previa en Vivo

Interactúa con el componente sin salir de la página.

500px

HTML

134

líneas

CSS

310

líneas

JavaScript

265

líneas


                <div class="dashboard-container">
  <div class="dashboard-header">
    <h2>Panel de Análisis</h2>
    <div class="dashboard-controls">
      <button class="control-btn" id="addWidgetBtn">Agregar Widget</button>
      <button class="control-btn" id="resetLayoutBtn">Restablecer Diseño</button>
    </div>
  </div>
  
  <div class="dashboard-grid" id="dashboardGrid">
    <!-- Widget 1: Resumen de Tráfico -->
    <div class="widget" data-id="traffic">
      <div class="widget-header">
        <h3>Resumen de Tráfico</h3>
        <div class="widget-controls">
          <button class="widget-btn expand-btn">↕</button>
          <button class="widget-btn close-btn">×</button>
        </div>
      </div>
      <div class="widget-content">
        <div class="chart-container">
          <canvas id="trafficChart"></canvas>
        </div>
        <div class="widget-stats">
          <div class="stat-item">
            <span class="stat-value">24.8K</span>
            <span class="stat-label">Visitantes</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">+12.4%</span>
            <span class="stat-label">Crecimiento</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Widget 2: Ingresos -->
    <div class="widget" data-id="revenue">
      <div class="widget-header">
        <h3>Ingresos</h3>
        <div class="widget-controls">
          <button class="widget-btn expand-btn">↕</button>
          <button class="widget-btn close-btn">×</button>
        </div>
      </div>
      <div class="widget-content">
        <div class="chart-container">
          <canvas id="revenueChart"></canvas>
        </div>
        <div class="widget-stats">
          <div class="stat-item">
            <span class="stat-value">\$42.6K</span>
            <span class="stat-label">Total</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">+8.2%</span>
            <span class="stat-label">Este Mes</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Widget 3: Actividad de Usuarios -->
    <div class="widget" data-id="activity">
      <div class="widget-header">
        <h3>Actividad de Usuarios</h3>
        <div class="widget-controls">
          <button class="widget-btn expand-btn">↕</button>
          <button class="widget-btn close-btn">×</button>
        </div>
      </div>
      <div class="widget-content">
        <div class="activity-list">
          <div class="activity-item">
            <div class="activity-icon">👤</div>
            <div class="activity-details">
              <div class="activity-title">Nuevo usuario registrado</div>
              <div class="activity-time">Hace 2 minutos</div>
            </div>
          </div>
          <div class="activity-item">
            <div class="activity-icon">🛒</div>
            <div class="activity-details">
              <div class="activity-title">Nuevo pedido recibido</div>
              <div class="activity-time">Hace 15 minutos</div>
            </div>
          </div>
          <div class="activity-item">
            <div class="activity-icon">✉️</div>
            <div class="activity-details">
              <div class="activity-title">Nuevo mensaje</div>
              <div class="activity-time">Hace 1 hora</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Widget 4: Rendimiento -->
    <div class="widget" data-id="performance">
      <div class="widget-header">
        <h3>Métricas de Rendimiento</h3>
        <div class="widget-controls">
          <button class="widget-btn expand-btn">↕</button>
          <button class="widget-btn close-btn">×</button>
        </div>
      </div>
      <div class="widget-content">
        <div class="metrics-grid">
          <div class="metric-card">
            <div class="metric-title">Tiempo de Respuesta</div>
            <div class="metric-value">124ms</div>
            <div class="metric-trend positive">↓ 12%</div>
          </div>
          <div class="metric-card">
            <div class="metric-title">Tiempo de Actividad</div>
            <div class="metric-value">99.9%</div>
            <div class="metric-trend positive">↑ 0.1%</div>
          </div>
          <div class="metric-card">
            <div class="metric-title">Tasa de Error</div>
            <div class="metric-value">0.2%</div>
            <div class="metric-trend negative">↑ 0.05%</div>
          </div>
          <div class="metric-card">
            <div class="metric-title">Rendimiento</div>
            <div class="metric-value">1.2K/s</div>
            <div class="metric-trend positive">↑ 8%</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

              
134líneas
4769caracteres
HTMLIdioma

Compatibilidad del Navegador

Chrome

≥ 50

Firefox

≥ 45

Safari

≥ 10

Edge

≥ 15

Fragmentos de Código Relacionados

Explora packs de plantillas

¿Necesitas bloques más grandes? Descubre landings y colecciones de componentes.

Abrir la biblioteca de plantillas →