Skip to content

SiSplitPartComponent documentation

selector
si-split-part

Input Properties

NameTypeDefaultDescription
actions
Action[][]Action buttons displayed in the split part header.
collapseIconClass
stringSets the icon class that is used in the buttons of split parts to collapse and uncollapse the parts.
collapseLabel
TranslatableString$localize`:@@SI_SPLIT.COLLAPSE_LABEL:Collapse`Aria label for collapse button. Needed for a11y
collapseOthers
booleanfalseThis toggles the behavior when collapsing this split part. If enabled, all split parts between this one and the end of the split in the respective direction will be collapsed if this part is collapsed. If disabled, only this split part will be collapsed.
collapseToMinSize
booleanfalseCollapse only to the given min size.
collapsible
CollapseToundefinedDefines whether and in which direction the split part can collapse. When unset, the collapse button is hidden.
expanded
booleantrueSets the initial expanded or collapsed state of the split part.
headerTemplate
TemplateRef<{ $implicit: SiSplitPartComponent }>Custom template for the split part header. The template receives the component instance as implicit context.
heading
TranslatableStringSets the title of the split part header.
minSize
number0Minimum size in px.
removeContentOnCollapse
booleanfalseWhen a split part is collapsed, the content gets hidden but it will still remain within the DOM. If you want to remove and destroy the component in collapsed mode and recreate it on un-collapse, set this property to true.
showHeader
booleantrueDefines if the header of the split part is visible. Default is true.
size
Required		numberExpanded size.
stateId
stringAn optional stateId to uniquely identify a component instance. Required for persistence of ui state.
unit
Required		SplitUnitUnit for the configured size .

Output Properties

NameTypeDescription
collapseChanged
booleanEmits when the part is collapsed or expanded.
stateChange
PartStateEmits the part's expanded state and size after it is toggled.

Attributes and Methods

NameTypeDefaultDescription
(readonly) collapsed
booleanGet collapsed state.
Returns True if the split part is collapsed, false is expanded.
toggleCollapse()
() => voidToggles the collapsed or expanded state.

Types Documentation

Properties
click: (evt: Event) => void
iconClass: string
tooltip: string
(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.
("to-start" | "to-end")
("px" | "fr")
Properties
expanded?: boolean
size?: number
("horizontal" | "vertical")

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