BaseTextList

Component to render data in p | ul | dt tags depending on field type 'data'

Props

Prop name	Description	Type	Values	Default
data	data structure for different rendered tags: <p>: { label: {string, Object}, data: {string} } <ul>: { label: {string, Object}, data: {string[]}} <dt>: { label: {string, Object}, data: [{ label: {string, Object}, value: {string}, url: {string}, additional: {Object} }]} or { label: {String, Object}, data: { label: {String, Object}, value: {string}, url: {string}, additional: {Object} }} label might be a string or a language object with ISO 639-1 as object properties (e.g. { en: 'x', de: 'y' }). additional property creates a tooltip and takes an object in the same format as data: label, value and url. Note: for dt tag url will render value as a link	array	-	[]
renderLabelAs	render component as e.g.: 'h2' | 'h3'	string	-	'div'
labelMarginBottom	set margin-bottom for the label	boolean	-	false
cols2	render content in two columns	boolean	-	false
autoHeight	set box height to auto	boolean	-	false
renderLinkAs	specify how link element should be rendered - this needs to be a valid vue link component (e.g. RouterLink, NuxtLink) and vue-router is necessary	string	-	'RouterLinnk'
listType	specify how data-list (label, value) should be rendered	string	horizontal, vertical	'horizontal'

Slots

Name	Description	Bindings
tooltip	slot for tooltip content

---

Demo

Example of BaseTextList to render data in one column

Example of BaseTextList to render data in two columns

Note: If data is a single Object and field type is 'string', then data will be rendered in two columns