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 (opens in a new tab) properties.
Properties
Title
| Prop | title |
|---|---|
| Type | string |
| Default | undefined |
The title text that appears in the browser tab when this page is open.
Icon
| Prop | icon |
|---|---|
| Type | string |
| Default | FileIcon |
The icon associated with the page. It will be shown in the nav bar.
Width
| Prop | width |
|---|---|
| Type | string |
| Default | 100% |
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
| Prop | minWidth |
|---|---|
| Type | string |
| Default | 320px |
The minimum width of the page within the browser window.
Max Width
| Prop | maxWidth |
|---|---|
| Type | string |
| Default | 960px |
The maximum width of the page within the browser window.
Min Height
| Prop | minHeight |
|---|---|
| Type | string |
| Default | undefined |
The minimum height of the page within the browser window.
Background Color
| Prop | backgroundColor |
|---|---|
| Type | string |
| Default | undefined |
The background color of the page.
Layout Style
| Prop | layoutStyle |
|---|---|
| Type | NodeLayoutStyle ('GRID' | 'HORIZONTAL_STACK' | 'VERTICAL_STACK') |
| Default | GRID |
The layout style of the page. GRID is a powerful abstraction over CSS Grid, while VERTICAL_STACK resembles a prototypical CSS Flexbox layout.
Distribute Content
| Prop | distributeContent |
|---|---|
| Type | NodeLayoutDistributeStyle ('start' | 'center' | 'end' | 'around' | 'between' | 'even') |
| Default | start |
The distribution of the children nodes within the component. Corresponds to the justify-content CSS Flexbox property.
Align Content
| Prop | alignContent |
|---|---|
| Type | NodeLayoutAlignStyle ('start' | 'center' | 'end') |
| Default | start |
The alignment of the children nodes within the page. Corresponds to the align-items CSS Flexbox property.
Padding
| Prop | padding |
|---|---|
| Type | string |
| Default | 16px |
The internal padding of the page to place around its children.
Spacing
| Prop | spacing |
|---|---|
| Type | string |
| Default | 16px |
The spacing to use between child nodes of the page.
Grid Columns
| Prop | gridColumns |
|---|---|
| Type | number |
| Default | 12 |
The number of columns in the page's grid system.
Grid Rows
| Prop | gridRows |
|---|---|
| Type | number |
| Default | 0 |
The number of rows in the page's grid system, expanding to fill the container.
Grid Row Height
| Prop | gridRowHeight |
|---|---|
| Type | string |
| Default | 16 |
The height of each row within the page's grid system, in pixels.
Row Gap
| Prop | gridRowGap |
|---|---|
| Type | string |
| Default | 4px |
The space between each row within the page's grid system, in pixels.
Column Gap
| Prop | gridColumnGap |
|---|---|
| Type | string |
| Default | 4px |
The space between each column within the page's grid system, in pixels.
Authorization Rules
| Prop | authorizationRules |
|---|---|
| Type | string |
| Default | [] |
Custom authorization rules for this page
Custom Styles
| Prop | styles |
|---|---|
| Type | string |
| Default | ::component { } |
Custom CSS styles to be applied to the node. Use element.styles to refer to the current node.
Route
| Prop | route |
|---|---|
| Type | string |
| Default | undefined |
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
| Prop | includeInSitemap |
|---|---|
| Type | boolean |
| 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
| Prop | params |
|---|---|
| Type | unknown |
| Default | undefined |
Parameters for this page
Route Query String
| Prop | query |
|---|---|
| Type | unknown |
| Default | undefined |
Query string for this page
Header Component
| Prop | headerComponent |
|---|---|
| Type | (string | null) |
| Default | undefined |
The component to render as the page header.
Left Sidebar Component
| Prop | leftSidebarComponent |
|---|---|
| Type | (string | null) |
| Default | undefined |
The component to render as the page's left sidebar.
Right Sidebar Component
| Prop | rightSidebarComponent |
|---|---|
| Type | (string | null) |
| Default | undefined |
The component to render as the page's right sidebar.
Footer Component
| Prop | footerComponent |
|---|---|
| Type | (string | null) |
| Default | undefined |
The component to render as the page footer.
Header Component Props
| Prop | headerProps |
|---|---|
| Type | object |
| Default | {} |
Additional data with which to populate the header component. This data will be available as {{$props}} within the header component.
Left Sidebar Props
| Prop | leftSidebarProps |
|---|---|
| Type | object |
| Default | {} |
Additional data with which to populate the left sidebar component. This data will be available as {{$props}} within the left sidebar component.
Right Sidebar Props
| Prop | rightSidebarProps |
|---|---|
| Type | object |
| Default | {} |
Additional data with which to populate the right sidebar component. This data will be available as {{$props}} within the right sidebar component.
Footer Props
| Prop | footerProps |
|---|---|
| Type | object |
| Default | {} |
Additional data with which to populate the footer component. This data will be available as {{$props}} within the footer component.
Left Sidebar Open
| Prop | leftSidebarOpen |
|---|---|
| Type | boolean |
| Default | true |
Whether or not the left sidebar should be open.
Right Sidebar Open
| Prop | rightSidebarOpen |
|---|---|
| Type | boolean |
| Default | true |
Whether or not the right sidebar should be open.
Left Sidebar Overlay
| Prop | leftSidebarOverlay |
|---|---|
| Type | boolean |
| Default | false |
Whether or not the left sidebar should be hover over the content of the page.
Right Sidebar Overlay
| Prop | rightSidebarOverlay |
|---|---|
| Type | boolean |
| Default | false |
Whether or not the right sidebar should be hover over the content of the page.
Event Handlers
On Unload
| Handler | pageNode.onUnload |
|---|
A function to call on page exit.