Skip to content

SiCollapsiblePanelComponent documentation

selector
si-collapsible-panel

Input Properties

NameTypeDefaultDescription
badge
(string | number)Defines the content of the optional badge. Should be a number or something like "100+". if undefined or empty string, no badge is displayed
badgeColor
stringDefines the background color of the badge. Default is specific to Element flavour.
colorVariant
BackgroundColorVariantColor to use for component background
contentBgClasses
string''Additional CSS classes for the collapsible content region.
contentCssClasses
string''Additional CSS classes for the wrapping content element.
disabled
booleanfalseWhether the si-collapsible-panel is disabled.
headerCssClasses
string''Additional CSS classes for the top element.
heading
TranslatableStringHeading for the collapsible panel.
icon
stringThe icon to be displayed besides the heading.
opened
booleanfalseExpand/collapse the panel.

Output Properties

NameTypeDescription
openedChange
booleanExpand/collapse the panel.
panelToggle
booleanAn event emitted when the user triggered expand/collapse and emit with the new open state. The event is emitted before the animation happens.

Attributes and Methods

NameTypeDefaultDescription
openClose(...)
(open: boolean, enableAnimation: boolean = true) => voidExpand/collapse panel.

Parameters
  • open: boolean  indicate the panel shall open or close
  • enableAnimation: boolean = true  with animation

Types Documentation

("base-1" | "base-0")
Use this type with filter components colorVariant to render component variants based on background of container
(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
Translatable
import

Except where otherwise noted, content on this site is licensed under MIT License.