Page
The Page component serves as the main container for app content with preset layouts and heading controls. Use it to structure full-screen views with consistent navigation and content organization.
Page is designed for full-screen modal interfaces and isn't suitable for inline content or partial page layouts within existing POS screens.
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
draft-order-details. action. render - pos.
exchange. post. action. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
product-details. action. render - pos.
purchase. post. action. render - pos.
register-details. action. render - pos.
return. post. action. render
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
draft-order-details. action. render - pos.
exchange. post. action. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
product-details. action. render - pos.
purchase. post. action. render - pos.
register-details. action. render - pos.
return. post. action. render
Use cases
- Full-screen interfaces: Create interfaces for complex workflows like customer management or inventory.
- Header layouts: Structure content areas with consistent headers, titles, and action buttons.
- Sidebar support: Organize content with built-in sidebar for secondary information or tools.
- Consistent patterns: Establish consistent page layouts to maintain user familiarity.
Anchor to examplesExamples
Anchor to example-structure-a-page-layoutStructure a page layout
Structure full-screen views using a Page component with built-in header and content layouts. This example shows a basic page with title and main content area.
Structure a page layout
Structure a page layout
Examples
Structure a page layout
Description
Structure full-screen views using a `Page` component with built-in header and content layouts. This example shows a basic page with title and main content area.
Default
<s-page heading="Title"> <s-button slot="secondary-actions"> Action </s-button> </s-page>
Anchor to propertiesProperties
Configure the following properties on the Page component.
- Anchor to headingheadingheadingstringstringDefault: : ''Default: : ''
The main page heading, displayed in the action bar at the top of the page.
- Anchor to idididstringstring
A unique identifier for the element.
- Anchor to subheadingsubheadingsubheadingstringstring
A secondary page heading, displayed under the main heading in the action bar.
Anchor to slotsSlots
The Page component supports slots for additional content placement within the page. Learn more about using slots.
- Anchor to asideasideasideHTMLElementHTMLElement
Content to display in the page's sidebar.
- Anchor to secondary-actionssecondary-actionssecondary-actionsHTMLElementHTMLElement
Button element to display in the action bar. Only a single button is supported.
Anchor to best-practicesBest practices
- Write descriptive headings: Use heading and subheading to describe the page's purpose and provide context about the current workflow step.
- Place one primary action in action bar: Use the secondary-actions slot for the page's most important action.
- Use aside for supplementary content: Reserve the aside slot for navigation, contextual help, or supporting information.
Anchor to limitationsLimitations
The secondary-actions slot supports only a single button element. Multiple actions in the action bar aren't supported and should be handled within the main content area.