Skip to content

BaseInfoPanel

Props

Prop nameDescriptionTypeValuesDefault
iconNamespecify the name of the icon rendered on the left side or use slot icon.
(see BaseIcon for available icons).
if no icon should be displayed leave the section empty.
string-'attention'
alignIcondefine if icon should be aligned top or center.
if prop expandable is true the default is top otherwise the default is center.
stringtop, center''
panelStyledefine the styling of the panel (influences e.g. icon size or padding).stringlarge, medium'large'
boxShadowshould box shadow be visible (useful to turn of if component should
be rendered inside another box e.g.).
boolean-true
panelHeaderTextthe panel header text or use slot header instead.string-''
renderPanelHeaderAsdefine the HTML element as which the header should be rendered or
use slot header instead.
string-'h2'
textdefine panel body text or use slot text instead.string|array-''
buttonsConfigadd buttons at the end of the text element via this config and it will
render BaseButton elements - this should be an array of objects with the following
properties:

id: identifier that will also be emitted via action event on button click
label?: button label
icon?: button icon to be displayed - for available options see BaseIcon
iconPosition?: should icon be displayed left or right of button label, default
is right
disabled?: set button disabled

caveat: label and icon property are optional but at least one of them needs to be
specified!
array-[]
expandableif set true an BaseExpandBox is rendered inside the text body
config for this BaseExpandBox can be set via expandBoxConfig prop.
boolean-false
expandBoxConfigif prop expandable is set true use this prop to configure the BaseExpandBox element.
See BaseExpandBox for available options.
object-{}

Events

Event namePropertiesDescription
actionundefined string - the id of the button clickedinform parent of button click

Slots

NameDescriptionBindings
iconreplace the left side icon element
headerreplace the header instead of using panelHeaderText
textreplace the text body with something custom e.g. BaseTextList
bottomreplace buttons with custom elements or add some other custom element. If body is expandable these elements are rendered within the expand box.

Demo

A simple example

Expandable example using more config and slots