#
Slate Properties
The slate defines the parent canvas; the node is the individual object on the slate, and an association defines the relationship between nodes.
Take note of these badges:
| Badge | Description |
|---|---|
| Experimental | This is an expirimental feature. |
| Slatebox App Enabled | This property works in conjuction with the Slatebox App. |
| Collaboration Feature | This property works in collaboration mode, which must be bootrstrapped either with the Slatebox App or some other mechanism. |
#
Slate Properties
Properties ยท View on Github example |
Description | Type | Default |
|---|---|---|---|
id abcd |
Unique identifier for the slate | string | "" |
container abcd |
The id of the container that will host the slate (so this would be slateCanvas if the container was <div id='slateCanvas'></div>) |
string | "" |
instance abcd |
Unique instance id of the slate (only necessary in collaboration mode) | string | "" |
name slate name |
Name of the slate | string | "" |
description slate description |
Description of the slate | string | "" |
basedOnThemeId theme12 |
Apply a specific theme to the slate using the [theme](Theme API) | string | null |
|
Experimental
syncWithTheme true |
Sync the shape creation with the theme in question | boolean | false |
containerStyle.backgroundColor #333 or transparent |
Static hex background color of the slate (hex or transparent) | string | transparent |
containerStyle.backgroundImage https://picsum.photos/id/237/200/300 |
Background src image of the slate | string | "" |
| containerStyle.backgroundSize cover |
CSS Background Size Property. (cover or contain, etc) |
string | "" |
|
Experimental
containerStyle.backgroundEffect abcd |
Use an SVG filter effect for the background | string | null |
containerStyle.backgroundColorAsGradient true |
Enable background gradient | boolean | null |
containerStyle.backgroundGradientType linear or radial |
Specify the background gradient to apply to the slate | string | null |
| containerStyle.backgroundGradientColors ['#ccc', '#333] |
Array of hex colors that make up the gradient | array | [] |
|
Slatebox App Enabled
containerStyle.backgroundGradientStrategy shades |
Define the gradient strategy (only when using the Slatebox App to generate the colors). Either shades (variance of a single color) or pallette (complementary colors) can be used. |
string | shades |
| viewPort.useIntertiaScrolling true |
Use inertia scrolling for the Slate canvas. (Two finger touchpad slide navigation) | boolean | true |
| viewPort.showGrid true |
Show background alignment 50 x 50 grid | boolean | false |
| viewPort.snapToObjects false |
Auto-snap to the neighboring objects when positioning nodes | boolean | true |
| viewPort.gridSize 100 |
Size of square outline inside the grid | integer | 50 |
| viewPort.width 10000 |
Width in px of the canvas | integer | 50000 |
| viewPort.height 10000 |
Height in px of the canvas | integer | 50000 |
| viewPort.left abcd |
Initial left (x) position of the canvas | integer | 25000 |
| viewPort.top abcd |
Initial top (y) position of the canvas | integer | 25000 |
| enabled false |
Set to false to disable the slate and make it non-interactive | boolean | true |
| allowDrag false |
Allow the canvas to be draggable | boolean | true |
| showbirdsEye abcd |
Show the birds eye view in the upper | boolean | true |
| sizeOfbirdsEye 150 |
Default size of birds eye square in px | integer | 200 |
| showMultiSelect false |
Show the multi select button on the slate | boolean | true |
| showZoom false |
Show the zoom slider on the slate | boolean | true |
| showUndoRedo abcd |
Show undo / redo buttons on the slate | boolean | true |
| showStatus abcd |
Show the status x,y coordinates in the upper left | boolean | false |
| showLocks abcd |
Show the node locks on the slate when a node has options.locked set to true |
boolean | true |
| mindMapMode abcd |
Enable mind map mode on the slate. Mind-map mode automatically creates parent -> child relationships when a node is added from another node. | boolean | true |
|
Slatebox App Enabled
isPublic false |
Determine if a slate is public, private, or unlisted when using the Slatebox App. | boolean | true |
|
Slatebox App Enabled
isUnlisted false |
Determine if a slate is public, private, or unlisted when using the Slatebox App. | boolean | false |
|
Slatebox App Enabled
isPrivate false |
Determine if a slate is public, private, or unlisted when using the Slatebox App. | boolean | false |
|
Experimental
autoEnableDefaultFilters abcd |
Auto enable SVG background filters for slate | boolean | false |
|
Collaboration Feature
followMe abcd |
Enable follow-me mode: enforce the Slate canvas and zoom positions to be synced across all collaborators | boolean | false |