# 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 attributecan either be a string or a vue-router Location object (= object with path propertyand 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