• Reference
  • Nodes
  • Components
  • Page

Page Component

Pages are the primary "views" of your application. Almost all apps will have at least one page.

You can navigate to a page by going to its route in your browser. For example, the widgets page will be available at https://yourprojectslug.dynaboard.app/widgets. The special index page will be mounted at the root of your domain.

You can lay out your pages whoever you'd like. Responsive layouts are enabled by CSS Grid properties.

Properties

Title

Proptitle
Typestring
Defaultundefined

The title text that appears in the browser tab when this page is open.

Width

Propwidth
Typestring
Default100%

The width of the page within the browser window. Usually, you'll want to leave this as 100% and instead modify maxWidth for responsive layouts.

Min Width

PropminWidth
Typestring
Default320px

The minimum width of the page within the browser window.

Max Width

PropmaxWidth
Typestring
Default960px

The maximum width of the page within the browser window.

Min Height

PropminHeight
Typestring
Default960px

The minimum height of the page within the browser window.

Background Color

PropbackgroundColor
Typestring
Defaultundefined

The background color of the page.

Layout Style

ProplayoutStyle
TypeNodeLayoutStyle ('GRID' | 'HORIZONTAL_STACK' | 'VERTICAL_STACK')
DefaultGRID

The layout style of the page. GRID is a powerful abstraction over CSS Grid, while VERTICAL_STACK resembles a prototypical CSS Flexbox layout.

Align Content

PropalignContent
TypeNodeLayoutAlignStyle ('start' | 'center' | 'end')
Defaultstart

The alignment of the children nodes within the page. Corresponds to the align-items CSS Flexbox property.

Padding

Proppadding
Typestring
Default16

The internal padding of the page to place around its children.

Spacing

Propspacing
Typestring
Default16

The spacing to use between child nodes of the page.

Grid Columns

PropgridColumns
Typenumber
Default12

The number of columns in the page's grid system.

Grid Rows

PropgridRows
Typenumber
Default0

The number of rows in the page's grid system, expanding to fill the container.

Grid Row Height

PropgridRowHeight
Typestring
Default16

The height of each row within the page's grid system, in pixels.

Row Gap

PropgridRowGap
Typestring
Default4

The space between each row within the page's grid system, in pixels.

Column Gap

PropgridColumnGap
Typestring
Default4

The space between each column within the page's grid system, in pixels.

Authorization Rules

PropauthorizationRules
Typestring
Default[]

Custom authorization rules for this page

Custom Styles

Propstyles
Typestring
Defaultelement.styles { }

Custom CSS styles to be applied to the node. Use element.styles to refer to the current node.

Route Override

Proproute
Typestring
Defaultundefined

Custom express-style route for this page. Specifying this value will override the default route which is the name of this page. For example, if the page is named profile, the page will by default be available at /profile. A route override of users/:id will make the page available when navigating to /users/123, where 123 is available on the page's params.id prop. Using a route override will hide the page from the app's sitemap.xml. All express route matching patterns are supported.

Include in Sitemap

PropincludeInSitemap
Typeboolean
Default{{true}}

Whether or not this page should be included in the sitemap.xml file, used by search engines to explore your app.

Route Parameters

Propparams
Typeunknown

Parameters for this page

Route Query String

Propquery
Typeunknown

Query string for this page

Last updated on November 8, 2022