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