API Dashboard The Dashboard component is responsible in deciding what responsive breakpoint is to be used.
From this the layouts can then change to best suit the screen size.
Props Name Type Required Default Description id String | Number
yes UUID for the dashboard
Events Name Description currentBreakpointUpdated returns the active layout breakpoint
Dash Layout Each Dash Layout contains an name, numberOfCols and optionally a breakpointWidth.
Note that only one layout should have the breakpointWidth undefined
. This layout is the biggest. The smallest should have a breakpointWidth of 0
.
Props Name Type Required Default Description breakpoint string
yes typically describing the breakpoint Size (i.e. xl, lg etc) numberOfCols number
no 12
Number of columns allowed margin object
no { x:10, y:10 }
Distance in pixels between DashItems breakpointWidth number
no Width used to determine which layout is most appropriate for the screen size useCssTransforms boolean
no false
Use translate3d instead of direct top left css properties compact boolean
no true
Automatically move items up if there is space available
Dash Item The dash item is responsible for displaying the items content (via slot) and also for dragging and resizing around the layout.
All props can be synced back to the item being passed via the .sync modifier (see examples)
There are also slots around the item for custom drag icons (again see examples)
Props Name Type Required Default Description id [Number, String]
true UUID for the item x Number
false 0
y Number
false 0
width Number
false 1
Width (in col units) height Number
false 1
Height (in row units) draggable Boolean
false true
If the item can be dragged resizable Boolean
false true
If the item can be resized resizeEdges String
false "bottom right"
The edges it can be resized (experimental for all options apart from bottom right) resizeHandleSize Number
false 8
The area where resize can be selected on the item draggableZIndex Number
false 1
The zIndex applied to the draggable area to make sure it is above the items in the slot resizableZIndex Number
false 1
The zIndex applied to each resizeable area to make sure it is above the items in the main slot
Events Name Description moveStart Fires initially when an item is being moved (dragged) by human interaction moving Fires while an item is being moved (dragged) moveEnd Fires when the move is complete resizeStart Fires initially when an item size is changing (via human interaction) resizing Fires while the item is being resized resizeEnd Fires once resizing is complete hoverStart Fires when mouse begins to hover over DashItem hoverEnd Fires when mouse moves our of DashItem
Resizing Slots Names resizeTop resizeBottom resizeBottomRight resizeBottomLeft resizeTopLeft resizeTopRight
Last Updated: 3/24/2020, 8:20:26 AM