Page Component Reference

Related documents

• Component Overview
• Component Reference
• Built-in Components
• Template Markup Language (TML) Reference
• PageCol Component Reference
• Card Component Reference
• RowCard Component Reference

Table of Contents

• Introduction
• Attributes
• Instance methods
  • Inherited methods
• Children
• DOM element properties
• Styling

Introduction

Syntax

tml`
	<Page>
		...
	</Page>
`

The Page component creates a scrollable container for page content. Content can be visually grouped into rectangular Cards, if desired. Using the PageCol component, the content can be organized into columns that display as two columns on wide devices or one column on narrow devices. If PageCol is used then the Page must have exactly two PageCol children that contain the page content.

When the page is hidden, the Page remembers its scroll position and restores it when the page is shown again.

Attributes

• Standard properties
  The Page component accepts the standard attributes.

Instance methods

These methods are intended to be used by parent components to dynamically change the properties of the rendered components without re-rendering.

Inherited methods

• Component methods

Children

All template children are included as the Page component children. A Page must have either no PageCol children or exactly two children, both PageCol components; otherwise an assertion fails (Page Component: Illegal children).

DOM element properties

• The Page Component will render a <div> with the page children as its children.
• The <div> will have a CSS class name with the string page.

Styling

By default, the Page <div>:

• Spans the viewport, excluding the navigation elements.
• Will be vertically scrollable.
• Is transparent and overlaid on the root --main-fill-color.
• Is a flex container organized as a row.