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