Page

<gstock-page> | GstockPage

Página básica

Use el componente gstock-page para crear una estructura de página estándar con título y descripción.

Contenido principal de la página.

 
<gstock-page title="Mi Página" description="Esta es una descripción básica de la página">
  <p>Contenido principal de la página.</p>
</gstock-page>

Con breadcrumb

Use el slot breadcrumb para añadir navegación de migas de pan a la página.

Inicio Dashboard Panel de Control
Configuración Perfil Ayuda 
<gstock-page title="Panel de Control" description="Gestiona tu cuenta y configuraciones desde aquí">
  <gstock-breadcrumb slot="breadcrumb">
    <gstock-breadcrumb-item href="/">Inicio</gstock-breadcrumb-item>
    <gstock-breadcrumb-item href="/dashboard">Dashboard</gstock-breadcrumb-item>
    <gstock-breadcrumb-item>Panel de Control</gstock-breadcrumb-item>
  </gstock-breadcrumb>

  <div class="actions-grid">
    <gstock-button variant="solid">Configuración</gstock-button>
    <gstock-button variant="outlined">Perfil</gstock-button>
    <gstock-button variant="plain">Ayuda</gstock-button>
  </div>
</gstock-page>

Solo título

El componente funciona perfectamente con solo un título, sin descripción.

Notificaciones por email Modo oscuro Actualizaciones automáticas 
<gstock-page title="Configuraciones">
  <div class="settings-list">
    <gstock-switch>Notificaciones por email</gstock-switch>
    <gstock-switch>Modo oscuro</gstock-switch>
    <gstock-switch checked>Actualizaciones automáticas</gstock-switch>
  </div>
</gstock-page>

Solo descripción

También puede usar solo la descripción sin título si es necesario.

1,234

Usuarios

98.5%

Uptime

42

Alertas

 
<gstock-page
  description="Aquí puedes encontrar todas las métricas y estadísticas importantes de tu aplicación.">
  <div class="metrics-grid">
    <div class="metric-card">
      <h3>1,234</h3>
      <p>Usuarios</p>
    </div>
    <div class="metric-card">
      <h3>98.5%</h3>
      <p>Uptime</p>
    </div>
    <div class="metric-card">
      <h3>42</h3>
      <p>Alertas</p>
    </div>
  </div>
</gstock-page>

Página completa

Ejemplo de una página completa con breadcrumb, título, descripción y contenido.

Inicio Administración Usuarios
Nuevo Usuario 
<gstock-page
  title="Gestión de Usuarios"
  description="Administra los usuarios de tu organización, sus roles y permisos.">
  <gstock-breadcrumb slot="breadcrumb">
    <gstock-breadcrumb-item href="/">Inicio</gstock-breadcrumb-item>
    <gstock-breadcrumb-item href="/admin">Administración</gstock-breadcrumb-item>
    <gstock-breadcrumb-item>Usuarios</gstock-breadcrumb-item>
  </gstock-breadcrumb>

  <div>
    <gstock-button variant="solid" color="primary">
      <gstock-icon name="plus" slot="prefix"></gstock-icon>
      Nuevo Usuario
    </gstock-button>
  </div>

  <gstock-data-grid striped hoverable></gstock-data-grid>
</gstock-page>

<script type="module">
  customElements.whenDefined('gstock-data-grid').then(() => {
    
    const grid = document.querySelector('gstock-data-grid');

    grid.columns = [
      { key: 'name', title: 'Nombre', sortable: true },
      { key: 'email', title: 'Email', sortable: true },
      {
        key: 'role',
        title: 'Rol',
        sortable: true,
        formatter: value => {
          const color = value === 'Administrador' ? 'success' : 'neutral';
          return `<gstock-badge variant="${color}">${value}</gstock-badge>`;
        },
      },
      {
        key: 'status',
        title: 'Estado',
        sortable: true,
        align: 'center',
        formatter: value => {
          const color = value === 'Activo' ? 'success' : 'warning';
          return `<gstock-badge variant="${color}">${value}</gstock-badge>`;
        },
      },
      {
        key: 'actions',
        title: 'Acciones',
        align: 'center',
        formatter: () => {
          return `
            <div style="display: flex; gap: 4px; justify-content: center;">
              <gstock-icon-button icon="edit" size="small"></gstock-icon-button>
              <gstock-icon-button icon="trash" size="small" color="danger"></gstock-icon-button>
            </div>
          `;
        },
      },
    ];

    grid.data = [
      {
        id: 1,
        name: 'Ana García',
        email: 'ana@ejemplo.com',
        role: 'Administrador',
        status: 'Activo',
      },
      {
        id: 2,
        name: 'Carlos López',
        email: 'carlos@ejemplo.com',
        role: 'Usuario',
        status: 'Pendiente',
      },
    ];
  });
</script>