BaseChip

Basic Chip component

Props

Prop name	Description	Type	Values	Default
v-model	pass the text for the chip	string	-
isLinked	set if entry is a linked data entry and displayed with grey background	boolean	-	true
hoverBoxContent	if a hover box is associated with the chip add all relevant properties here (see BaseHoverBox for details) CAVEAT: this prop is deprecated and will be removed in the next major version! Usage not recommended! Have a look into BaseTooltipBox for implementing a similar functionality	object	-	{}
chipActive	set chip active (set color)	boolean	-	false
isRemovable	flag to specify if chip can be removed	boolean	-	true
textStyling	add some custom text styling	object	-	{}
editable	define true if chip should be editable on click Caveat: chips can not show hoverBoxContent as soon as it is editable respectively - if both are set true edit functionality takes precedent - chip will not be draggable, hoverBoxContent will not be shown!	boolean	-	false
assistiveText	text read when a chip is focused - currently only available with prop editable true	string	-	''
interpretTextAsHtml	if necessary chip text can be rendered as html this feature is currently only available if the chip is not editable caveat: setting this variable true can lead to XSS attacks. Only use this prop on trusted content and never on user-provided content.	boolean	-	false

Events

Event name	Properties	Description
value-changed	undefined string - the displayed text string after edit	if chip is editable value is updated with this event
clicked		event emitted when chip is clicked
hoverbox-active	undefined boolean - is hoverbox active	event indicating if hover box was set to show / hide
mouse-down	undefined Event - the native MouseEvent	event on mouse down, needed by base chips input to determine active chip
remove-entry	undefined string - the displayed chip string	triggered when the remove icon is clicked and returns the data behind the chip

---

Demo

A chip that can be edited