BaseDropBox

An Element to drop files or other UI Elements into

Props

Prop name	Description	Type	Values	Default
icon	specify an icon to be displayed centered in the box	string	-	null
showPlus	if true a plus sign is displayed in front of the icon	boolean	-	false
text	the text displayed below the icon	string	-	''
subtext	specify a potential subtext	string	-	''
boxSize	define the box size	object	-	{ width: '250px' }
boxRatio	define the ratio of width and height of the box (in percent string, e.g. 1:1 --> '100', 1:2 --> '50')	string	-	'100'
renderElementAs	specify the tag of the button	string	-	'div'
dropType	specify the type of drops	string	files, elements	'files'
dropElementName	if the dropType is elements, specify the element group name this needs to match the group name of the draggable element that should be dragged into this element	string	-	''
dragItemClass	if the dropType is elements specify a class name to limit interactions to a certain element	string	-	''
disabled	set button inactive	boolean	-	false
showTooltip	show tooltip	boolean	-	false

Events

Event name	Properties	Description
dropped-file	undefined DragEvent - propagating the triggered event	event emitted when a file or an element is dropped on the box, emitting the type of event
dropped-element	undefined string - the id of the dropped element	event emitted when an element is dropped on the box, emitting the element data id
clicked	undefined Event - propagating the triggered click event	Triggered when the box or tooltip is clicked

---

Demo

A box with event firing on drop