BaseLink

component to display different types of links e.g.: chip, internal, external, text, tooltip, tooltip (async content)

Props

Prop name	Description	Type	Values	Default
chipQueryName	specify a query parameter name for type chip links	string	-	'chip-link'
externalLinkTarget	specify external link target	string	_blank, _self	'_blank'
identifierPropertyName	specify the object property that should be used as identifier	string	-	'source'
identifierPropertyValue	specify the internal identifier to route to	number|string	-	''
path	specify an internal path to link, only for type chip links	string	-	''
renderLinkAs	specify how a link element should be rendered this needs to be a valid vue link component string (e.g. RouterLink) or a component directly and vue-router is necessary caveat: if you are using Nuxt the string 'NuxtLink' is not enough, but you need to import the component as import { NuxtLink } from '#components'; and pass the component to the prop!	string|object	-	'RouterLink'
spaceAfter	add a space " " after an element useful for link-type tooltip in lists	boolean	-	false
titleText	specify texts for the title tag depending on a link type (especially helpful to provide language-specific text) this needs to be an object with the following properties (if you don't want to display any specific text, leave an empty string): chip: Text is shown on hover of a chip link and gets merged with the type and value attributes. tooltip: Text is shown on hover of a tooltip link. type: Text for a single chip type. This needs to be an object containing properties matching the different chip types.	object	-	{ chip: 'Open {type} {value} in search', tooltip: 'Show more information', type: { artists: 'artist', keywords: 'keyword', } }
tooltip	specify tooltip content Prop must be either set true or an Object[] to render a type tooltip link. Object[]: - [{ label: 'label', value: 'value', altTitle?: 'altTitle', url: '#' }] to render a content list - any other structure in combination with the slot #tooltip Boolean: use the slot #tooltip to customize the content	boolean|array	-	false
tooltipAsync	async tooltip content, e.g. source, id where to fetch data from if set, event @tooltip-clicked with this object will be emitted	array	-	[]
tooltipStyles	additional tooltip styles caveat: properties top, left, right will be overwritten due position calculation	object	-	{}
tooltipTypeOnMobile	specify how the tooltipBox component is rendered on mobile resolutions box: component is rendered directly at the info icon modal: component is rendered as a modal popup fullscreen: component is rendered as ap popup with max height and width	string	box, fullscreen, modal	'box'
tooltipThresholdTop	specify a threshold value in px for the BaseTooltipBox top position calculation Note: The value can also be set globally with the CSS variable --base-tooltip-box-threshold-top. The property will be overwritten by the CSS variable.	number	-	0
type	used in combination with property identifierPropertyValue to render a type chip element. type identifies a source type for chip click-event e.g.: keyword | skill | object	string	-	''
url	external url to link to supported protocols: http://, https://, mailto:, tel:	string	-	''
value	value of the entry	string	-	''
altTitle	use this property to set the title attribute also for link types other than chip and tooltip if interpretTextAsHtml is set true for type chip and tootlip add a html-free version of value here to be used for the title attribute and with assistive technologies	string	-	''
additionalAttributes	set additional attributes directly on the link element, this can be HTML link element native attributes or framework specific props (e.g. aria-current-value to set the aria-current attribute, for more possibilities check out the Vue-Router documentation	object	-	{}
interpretTextAsHtml	set true to render link value as html 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
tooltip-clicked	undefined Array - async tooltip content
chip-clicked

Slots

Name	Description	Bindings
label
tooltip	slot to inject content	item Object - a tooltip object

---

Demo

The different link types are selected by the properties passed.

types	properties
chip	identifierPropertyValue && type
external	url
internal	identifierPropertyValue && !type
text
tooltip	tooltip
tooltip async	tooltipAsync