Custom Nodes
Svelvet
provides the ability to customize each node to your liking. To customize
your nodes, provide any of the following properties below in the node object. You can display your
desired text, change colors (background, border and text), define multiple source and target handles,
and set your own dimensions. Below you can find example implementations of these properties.
Current customizations include node
id
, data
, className
, position
, sourcePosition
, targetPosition
, width
, height
, bgColor
, borderColor
, textColor
, image
, src
, borderRadius
, clickCallback
, and childNodes
.
sourcePosition
represents the anchor point
location on the source node and is set to "bottom" by default.
targetPosition
represents the anchor point location
on the target node and is set to "top" by default.
Node Properties
- keyvalue
id
(required) numberdata
(required) { label: string } || { custom: name of imported Svelte component } || { html: string of html}className
string (custom class name)position
(required) { x: number, y: number }sourcePosition
string (top, bottom, left, right) - defaults to "bottom" if unspecifiedtargetPosition
string (top, bottom, left, right) - defaults to "top" if unspecifiedwidth
(required) numberheight
(required) numberbgColor
string of color name, hexcode, or rgbborderColor
string of color name, hexcode or rgbtextColor
string of color name, hexcode or rgbimage
booleansrc
string of image urlborderRadius
numberclickCallback
FunctionchildNodes
Array of numbers, put other nodes id's in here