#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.

#Slate Properties

Properties ยท View on Github
example
DescriptionTypeDefault
id
abcd
Unique identifier for the slatestring""
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 slatestring""
description
slate description
Description of the slatestring""
basedOnThemeId
theme12
Apply a specific theme to the slate using the [theme](Theme API)stringnull
Experimental
syncWithTheme
true
Sync the shape creation with the theme in questionbooleanfalse
containerStyle.backgroundColor
#333 or transparent
Static hex background color of the slate (hex or transparent)stringtransparent
containerStyle.backgroundImage
https://picsum.photos/id/237/200/300
Background src image of the slatestring""
containerStyle.backgroundSize
cover
CSS Background Size Property. (cover or contain, etc)string""
Experimental
containerStyle.backgroundEffect
abcd
Use an SVG filter effect for the backgroundstringnull
containerStyle.backgroundColorAsGradient
true
Enable background gradientbooleannull
containerStyle.backgroundGradientType
linear or radial
Specify the background gradient to apply to the slatestringnull
containerStyle.backgroundGradientColors
['#ccc', '#333]
Array of hex colors that make up the gradientarray[]
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.stringshades
viewPort.useIntertiaScrolling
true
Use inertia scrolling for the Slate canvas. (Two finger touchpad slide navigation)booleantrue
viewPort.showGrid
true
Show background alignment 50 x 50 gridbooleanfalse
viewPort.snapToObjects
false
Auto-snap to the neighboring objects when positioning nodesbooleantrue
viewPort.gridSize
100
Size of square outline inside the gridinteger50
viewPort.width
10000
Width in px of the canvasinteger50000
viewPort.height
10000
Height in px of the canvasinteger50000
viewPort.left
abcd
Initial left (x) position of the canvasinteger25000
viewPort.top
abcd
Initial top (y) position of the canvasinteger25000
enabled
false
Set to false to disable the slate and make it non-interactivebooleantrue
allowDrag
false
Allow the canvas to be draggablebooleantrue
showbirdsEye
abcd
Show the birds eye view in the upperbooleantrue
sizeOfbirdsEye
150
Default size of birds eye square in pxinteger200
showMultiSelect
false
Show the multi select button on the slatebooleantrue
showZoom
false
Show the zoom slider on the slatebooleantrue
showUndoRedo
abcd
Show undo / redo buttons on the slatebooleantrue
showStatus
abcd
Show the status x,y coordinates in the upper leftbooleanfalse
showLocks
abcd
Show the node locks on the slate when a node has options.locked set to truebooleantrue
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.booleantrue
Slatebox App Enabled
isPublic
false
Determine if a slate is public, private, or unlisted when using the Slatebox App.booleantrue
Slatebox App Enabled
isUnlisted
false
Determine if a slate is public, private, or unlisted when using the Slatebox App.booleanfalse
Slatebox App Enabled
isPrivate
false
Determine if a slate is public, private, or unlisted when using the Slatebox App.booleanfalse
Experimental
autoEnableDefaultFilters
abcd
Auto enable SVG background filters for slatebooleanfalse
Collaboration Feature
followMe
abcd
Enable follow-me mode: enforce the Slate canvas and zoom positions to be synced across all collaboratorsbooleanfalse