Page

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

Anchor to propertiesProperties

Use as the outer wrapper of a page

Anchor to connectedCallback connectedCallback () => void
Anchor to disconnectedCallback disconnectedCallback () => void
Anchor to inlineSize inlineSize "small" | "base" | "large": The inline size of the page

base corresponds to a set default inline size

large full width with whitespace

Page

adoptedCallback
```
() => void
```
attributeChangedCallback
```
(name: string) => void
```
click
Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
```
({ sourceEvent }?: ClickOptions) => void
```
connectedCallback
```
() => void
```
disconnectedCallback
```
() => void
```
inlineSize
The inline size of the page - `base` corresponds to a set default inline size - `large` full width with whitespace
```
"small" | "base" | "large"
```
queueRender
Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.
```
() => void
```
setAttribute
```
(name: string, value: string) => void
```

declare class Page extends PreactCustomElement implements PageProps {
  accessor inlineSize: PageProps['inlineSize'];
  constructor();
  connectedCallback(): void;
  disconnectedCallback(): void;
}

ClickOptions

sourceEvent
The event you want to influence the synthetic click.
```
ActivationEventEsque
```

export interface ClickOptions {
  /**
   * The event you want to influence the synthetic click.
   */
  sourceEvent?: ActivationEventEsque;
}

ActivationEventEsque

button
```
number
```
ctrlKey
```
boolean
```
metaKey
```
boolean
```
shiftKey
```
boolean
```

export interface ActivationEventEsque {
  shiftKey: boolean;
  metaKey: boolean;
  ctrlKey: boolean;
  button: number;
}

Was this section helpful?

Anchor to slotsSlots

Anchor to aside aside HTMLElement: The content to display in the aside section of the page.

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

PageSlots

aside
The content to display in the aside section of the page. This slot is only rendered when `inlineSize` is "base".
```
HTMLElement
```

export interface PageSlots {
  /**
   * The content to display in the aside section of the page.
   *
   * This slot is only rendered when `inlineSize` is "base".
   */
  aside?: HTMLElement;
}

Was this section helpful?

<s-page>

<s-section>

<s-text>Hello World</s-text>

</s-section>

</s-page>

examples

<s-page>
  <s-section>
      <s-text>Hello World</s-text>
  </s-section>
</s-page>

<!DOCTYPE html><html><head><style>html, body {height:100%} body {box-sizing: border-box; margin: 0; padding:0.5rem; padding: 0}</style><script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script></head><body><s-page>
  <s-section>
      <s-text>Hello World</s-text>
  </s-section>
</s-page></body></html>

Page

Anchor to propertiesProperties

Page

ClickOptions

ActivationEventEsque

Anchor to slotsSlots

PageSlots

examples

Preview