Page Node
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
Prop | pageNode.title |
---|---|
Type | string |
Default | undefined |
The title text that appears in the browser tab when this page is open.
Width
Prop | pageNode.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.
Max Width
Prop | pageNode.maxWidth |
---|---|
Type | string |
Default | 960px |
The maximum width of the page within the browser window.
Min Height
Prop | pageNode.minHeight |
---|---|
Type | string |
Default | 960px |
The minimum height of the page within the browser window.
Background Color
Prop | pageNode.backgroundColor |
---|---|
Type | string |
Default | undefined |
The background color of the page.
Layout Style
Prop | pageNode.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.
Align Content
Prop | pageNode.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 | pageNode.padding |
---|---|
Type | string |
Default | 16 |
The internal padding of the page to place around its children.
Spacing
Prop | pageNode.spacing |
---|---|
Type | string |
Default | 16 |
The spacing to use between child nodes of the page.
Grid Columns
Prop | pageNode.gridColumns |
---|---|
Type | number |
Default | 12 |
The number of columns in the page's grid system.
Grid Rows
Prop | pageNode.gridRows |
---|---|
Type | number |
Default | 0 |
The number of rows in the page's grid system, expanding to fill the container.
Grid Row Height
Prop | pageNode.gridRowHeight |
---|---|
Type | string |
Default | 16 |
The height of each row within the page's grid system, in pixels.
Row Gap
Prop | pageNode.gridRowGap |
---|---|
Type | string |
Default | 4 |
The space between each row within the page's grid system, in pixels.
Column Gap
Prop | pageNode.gridColumnGap |
---|---|
Type | string |
Default | 4 |
The space between each column within the page's grid system, in pixels.
Custom Styles
Prop | pageNode.styles |
---|---|
Type | string |
Default | element.styles { } |
Custom CSS styles to be applied to the node. Use element.styles
to refer to the current node.