Page
<gstock-page>
|
GstockPage
API
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
title
|
The title of the page. |
|
string
|
''
|
description
|
The description of the page. |
|
string
|
''
|
elevated
|
Displays the content area with elevated styling (border, background, and shadow). Only affects the main content slot, leaving the header, breadcrumb, and header slots outside the card. |
|
boolean
|
false
|
loading
|
Shows a loading spinner in the content area. |
|
boolean
|
false
|
updateComplete
|
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties .
Slots
| Name | Description |
|---|---|
default
|
The main content of the page. |
breadcrumb
|
Used for placing breadcrumb navigation. Typically contains a <gstock-breadcrumb> element. |
header-before-content
|
Optional slot positioned between the breadcrumb and the header. |
header-start
|
Optional slot positioned at the start of the header (left in LTR, right in RTL). |
header-end
|
Optional slot positioned at the end of the header (right in LTR, left in RTL). |
content-before-content
|
Optional slot positioned before the main content area, outside the elevated card if enabled. |
content-start
|
Optional slot positioned before the main content. |
content-end
|
Optional slot positioned after the main content. |
content-after-content
|
Optional slot positioned after the main content area, outside the elevated card if enabled. |
Learn more about slots .
Custom Properties
| Name | Description | Default |
|---|---|---|
--page-padding
|
Controls the padding of the page content area. | |
--page-gap
|
Controls the gap between page sections (header, content, etc.). | |
--page-max-width
|
Controls the maximum width of the page content. | |
--page-header-gap
|
Controls the gap between header elements. |
Learn more about custom properties .
CSS Parts
| Name | Description |
|---|---|
base
|
The component’s base wrapper. |
header
|
The page header containing title and description. |
header-content
|
The wrapper for title and description content. |
header-start
|
The header start slot wrapper. |
header-end
|
The header end slot wrapper. |
title
|
The page title wrapper. |
description
|
The page description wrapper. |
breadcrumb
|
The breadcrumb navigation wrapper. |
header-before-content
|
The wrapper for content positioned between the breadcrumb and the header. |
content-before-content
|
The wrapper for content positioned before the main content area. |
content
|
The main content area. |
content-start
|
The content start slot wrapper. |
content-end
|
The content end slot wrapper. |
content-after-content
|
The wrapper for content positioned after the main content area. |
loading
|
The loading spinner wrapper. |
Learn more about CSS parts .
Dependencies
This component automatically imports the following dependencies.