As A helper for setting the underlaying element of a component

Attributes

• as (:atom) - Defaults to :section.
• Global attributes are accepted.

Slots

• inner_block (required)

Use s-page as the main container for placing content in your app. Page comes with preset layouts and automatically adds spacing between elements.

Requirements

Requires OctantisEventProxy hook. See Install Hooks README.

Example

<.s_page heading="Products">
  <.s_section>
    <.s_text>Hello World</.s_text>
  </.s_section>
</.s_page>

## See

- https://shopify.dev/docs/api/app-home/polaris-web-components/structure/page

Attributes

• id (:string) (required) - A unique identifier for the element.

• heading (:string) - The main page heading.

• inline_size (:string) - "small" | "base" | "large"

  The inline size of the page

  • base corresponds to a set default inline size
  • large full width with whitespace

• connected_callback (:string)

• disconnected_callback (:string)

• Global attributes are accepted.

Slots

• aside - HTMLElement

  The content to display in the aside section of the page.

  This slot is only rendered when inlineSize is "base".

  Accepts attributes:

  • as (:atom) - Must be one of :section.

• breadcrumb_action - Navigations back actions for the page.

  Only accepts Link components.

• primary_action - The primary action for the page.

  Only accepts a single Button component with a variant of primary.

• secondary_action - Secondary actions for the page.

  Only accepts ButtonGroup and Button components with a variant of secondary or auto.

• inner_block