# BaseImageBox

A component with the primary purpose to display images in responsive boxes but also allowing for text only

# Props

Prop name Description Type Values Default
title The title of the item in question (max 2 lines), also used as img alt text
(atm - TODO: should there be a separate alt text (then again - what would that be since
file uploads dont have any properties)?)
string - 'No title'
subtext Text displayed directly below title (max two lines; max 3 lines with title) string - ''
showTitle should the title be displayed or box only display the image boolean - true
showTitleOnHover should the title be displayed on box hover boolean - false
imageUrl image url // TODO: should probably be required? otherwise we need definition of
what alternate content should be? (--> are there items without image? probably yes?)
string - null
description descriptive element displayed at bottom of box (e.g. item type like "Bilderserie") string - null
additional descriptive element displayed at bottom of box (e.g. item type like "Bilderserie") string - null
icon set optional icon
e.g. for items without image
string - ''
iconSize set optional icon size string small, medium, large, xlarge, xxlarge 'xxlarge'
playIcon display play icon
e.g. for Video, Audio files
boolean - false
selectable determines if the box should be selectable and the checkbox is displayed boolean - false
draggable set prop true if box can be dragged - used solely for styling purposes boolean - false
selected set select status (checkbox checked) from outside boolean - false
boxSize specify the size of the box object - {
width: 'auto',
height: 'auto'
}
boxText specify any text that should be displayed instead of an image;
each array element on new line
array - []
lazyload specify lazy image loading boolean - false
imageFirst specify position of image boolean - false
centerHeader specify if header should be centered
(aligned left otherwise)
boolean - false
renderElementAs define html element that should be rendered string - 'div'
linkTo if element is rendered as vue link component, specify a value for the to attribute
can either be a string or a vue-router Location object (= object with path property
and optional params or query object)
(this needs vue-router)
string|object - ''

# Events

Event name Properties Description
select-triggered undefined Boolean - was box selected event triggered when box is selectable and clicked upon
clicked event triggered when selectable is false and box is clicked

# Slots

Name Description Bindings
text to display more advanced text - if you use this please specify the ref attribute with boxTextInner that has the line-height css attribute set - so the text display height can be calculated correctly!
footer-left create custom content (e.g. featured icon for files) left of text
footer-right create custom content (e.g. published icon for files) left of text

# Demo

A variety of possibilities with image box

Last Updated: 3/27/2023, 4:42:24 PM