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 all children must be PageCol components that contain the page content.

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. If any child is a PageCol component, then all children must be PageCol components.

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.