# BaseExpandBox

Component to render content in expandable container

# Props

Prop name Description Type Values Default
expand expand box from the outside boolean - false
padding define padding of the box string none, large, small 'small'
showMoreText button text to show more content string - 'Show more'
showLessText button text to show less content string - 'Show less'
autoHeight define whether box height depends on content boolean - false
maxCollapsedHeight define the max height of the collapsed box in px number - 300
showButtonHeight define the height including margin of the show-more button in px number - 54
boxShadow option to disable the box shadow if element is nested into a box boolean - true

# Events

Event name Properties Description
box-height undefined number - the element offset height emitting box-height on resize
update:expand undefined boolean - is box expanded event emitted on button click

# Slots

Name Description Bindings
header slot to add additional information before expandable content
default add expand box content here
footer slot to add additional information after expandable content

# Demo

Example of BaseExpandBox to display expandable text, unordered list, datalist elements

Additional content in slot #header

Vero eos et accusam

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Vero eos et accusam

  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr, sed diam nonumy
  • Eirmod tempor invidunt

Vero eos et accusam

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