Page
<gstock-page>
|
GstockPage
Examples
Básico
Use el componente gstock-page para crear una estructura de página con título y descripción.
Main content of the page.
<gstock-page title="My Page" description="This is a basic page description">
<p>Main content of the page.</p>
</gstock-page>Con breadcrumb
Use el slot breadcrumb para añadir navegación de migas de pan.
<gstock-page title="Control Panel" description="Manage your account and settings from here">
<gstock-breadcrumb slot="breadcrumb">
<gstock-breadcrumb-item href="/">Home</gstock-breadcrumb-item>
<gstock-breadcrumb-item href="/dashboard">Dashboard</gstock-breadcrumb-item>
<gstock-breadcrumb-item>Control Panel</gstock-breadcrumb-item>
</gstock-breadcrumb>
<div class="actions-grid">
<gstock-button variant="solid">Settings</gstock-button>
<gstock-button variant="outlined">Profile</gstock-button>
<gstock-button variant="plain">Help</gstock-button>
</div>
</gstock-page>Acciones en el header
Use los slots header-start y header-end para añadir elementos a los extremos del header, como avatares, badges o botones de acción.
<gstock-page title="Monthly Reports" description="View the reports and monthly performance.">
<gstock-avatar slot="header-start" initials="MR" size="medium"></gstock-avatar>
<gstock-button variant="solid" slot="header-end">
<gstock-icon name="download" slot="prefix"></gstock-icon>
Export
</gstock-button>
</gstock-page>Los slots header-start y header-end solo se renderizan cuando tienen contenido asignado, evitando espacios vacíos en el header.
Contenido elevado
Use la propiedad elevated para mostrar el contenido principal con estilo de card (borde, fondo y sombra). El título y la descripción quedan fuera del card.
<gstock-page title="Configuration" description="General application settings." elevated>
<gstock-input label="Company Name" value="My Company LLC"></gstock-input>
<gstock-input label="Contact Email" value="info@mycompany.com"></gstock-input>
</gstock-page>
<style>
gstock-page::part(content) {
gap: var(--gstock-space-gap-lg);
display: flex;
flex-direction: column;
}
</style>Estado de carga
Use la propiedad loading para mostrar un spinner mientras el contenido se carga. El contenido del slot se oculta automáticamente.
This content is hidden while loading.
<gstock-page title="Loading Data" description="The content is loading, please wait..." loading>
<p>This content is hidden while loading.</p>
</gstock-page>La propiedad loading es compatible con elevated, mostrando el spinner dentro del card.
This content is hidden while loading.
<gstock-page title="Loading Data" description="The content is loading, please wait..." elevated loading>
<p>This content is hidden while loading.</p>
</gstock-page>Carga interactiva
Ejemplo que muestra cómo activar y desactivar el estado de carga dinámicamente.
Content loaded successfully.
<gstock-page title="Dashboard" description="Summary of recent activity.">
<p>Content loaded successfully.</p>
</gstock-page>Espaciado personalizado
Use las propiedades CSS --page-padding y --page-gap para personalizar el padding y el gap del contenedor interno de la página.
<gstock-page title="Espaciado personalizado" description="Esta página usa un padding y gap personalizados.">
Contenido con padding y gap personalizados.
</gstock-page>
<style>
gstock-page {
--page-padding: var(--gstock-space-padding-block-sm);
--page-gap: var(--gstock-space-gap-2xl);
}
</style>Las propiedades --page-padding y --page-gap también afectan al contenido elevado.
<gstock-page title="Custom Spacing Elevated" description="Elevated content with custom padding and gap." elevated>
Content with custom padding and gap inside an elevated card.
</gstock-page>
<style>
gstock-page {
--page-padding: var(--gstock-space-padding-block-lg);
--page-gap: var(--gstock-space-gap-2xl);
}
</style>Ancho máximo
Use la propiedad CSS --page-max-width para limitar el ancho del contenido y centrarlo horizontalmente.
The content does not exceed 600px in width and is centered horizontally.
<gstock-page title="Limited Width" description="The content of this page is centered with a maximum width.">
<p>The content does not exceed 600px in width and is centered horizontally.</p>
</gstock-page>
<style>
gstock-page {
--page-max-width: 600px;
}
</style>