SiMainDetailContainerComponent documentation¶

selector

si-main-detail-container

Input Properties¶

Name	Type	Default	Description
containerClass ¶	`string`	`'px-6 pt-6 px-md-9'`	CSS class(es) applied to the outermost container. Per default, Bootstrap classes to handle responsive paddings are applied: `px-6 pt-6 px-md-9` .
detailContainerClass ¶	`string`	`'pb-6'`	CSS class(es) applied to the detail container. In combination with `containerClass` , this allows for settings individual padding and margin values on the individual containers.
detailsActive ¶	`boolean`	`false`	Whether the details are currently active or not, mostly relevant in the responsive scenario when the viewport only shows either the main or the detail.
detailsBackButtonText ¶	`TranslatableString`	$localize`:@@SI_MAIN_DETAIL_CONTAINER.BACK:Back`	Details back button text. Required for a11y.
detailsHeading ¶	`TranslatableString`	`''`	The heading of the detail area.
heading ¶	`TranslatableString`	`''`	The heading of the main-detail layout component, usually a page heading.
hideBackButton ¶	`boolean`	`false`	You can hide the back button in the mobile view by setting true. Required in add, edit workflows on mobile sizes. During add or edit, the back button should be hidden. Default value is `false` .
largeLayoutBreakpoint ¶	`number`	`BOOTSTRAP_BREAKPOINTS.mdMinimum`	A numeric value defining the minimum width in px, which the container needs to be displayed in its large layout. Whenever smaller than this threshold, the small layout will be used. Default is value is BOOTSTRAP_BREAKPOINTS.mdMinimum.
mainContainerClass ¶	`string`	`'pb-6'`	CSS class(es) applied to the main container. In combination with `containerClass` , this allows for settings individual padding and margin values on the individual containers.
mainContainerWidth ¶	(`number` \| `"default"`)	`'default'`	The size of the main container. When resizableParts is enabled, the value is interpreted using mainContainerWidthUnit and updates as the splitter is moved. With `mainContainerWidthUnit="fr"` , numeric values must be from `0` to `100` (inclusive). The main and detail fractional weights are the value and `100 - value` ; out-of-range values fall back to `32` and `68` . In the static layout, numeric values represent a percentage from `0` to `100` (inclusive); out-of-range values leave both containers without max-size constraints. Pixel widths are not limited to the `0` to `100` range. With `'default'` , resizable pixel layouts use minMainSize , resizable fractional layouts use main and detail weights of `32` and `68` , and static layouts use `50%` .
mainContainerWidthUnit ¶	`SplitUnit`	`'px'`	Unit used for the main split part when resizableParts is enabled.
minDetailSize ¶	`number`	`300`	Sets the minimal width of the detail container in pixel.
minMainSize ¶	`number`	`300`	Sets the minimal width of the main container in pixel.
resizableParts ¶	`boolean`	`false`	Whether the main and detail parts should be resizable by a splitter or not. This is only supported in the 'large' scenario (when `hasLargeSize` is `true` ). Default value is `false` .
stateId ¶	`string`		An optional stateId to uniquely identify a component instance. Required for persistence of ui state.
truncateHeading ¶	`boolean`	`false`	Whether the heading should be truncated (single line) or not. Default value is `false` .

Output Properties¶

Name	Type	Description
detailsActiveChange ¶	`boolean`	Whether the details are currently active or not, mostly relevant in the responsive scenario when the viewport only shows either the main or the detail.
hasLargeSizeChange ¶	`boolean`	Emits whether the components size is large enough to display main and details views next to each other or not.
mainContainerWidthChange ¶	(`number` \| `"default"`)	The size of the main container. When resizableParts is enabled, the value is interpreted using mainContainerWidthUnit and updates as the splitter is moved. With `mainContainerWidthUnit="fr"` , numeric values must be from `0` to `100` (inclusive). The main and detail fractional weights are the value and `100 - value` ; out-of-range values fall back to `32` and `68` . In the static layout, numeric values represent a percentage from `0` to `100` (inclusive); out-of-range values leave both containers without max-size constraints. Pixel widths are not limited to the `0` to `100` range. With `'default'` , resizable pixel layouts use minMainSize , resizable fractional layouts use main and detail weights of `32` and `68` , and static layouts use `50%` .

Attributes and Methods¶

Name	Type	Default	Description
hasLargeSize ¶	`boolean`		Whether the main-detail layout component has a large size or not, `true` if the container´s width matches or exceeds the `largeLayoutBreakpoint` .

Types Documentation¶

TranslatableString (`string` & `Translatable`)¶ Type alias 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.

SplitUnit (`"px"` \| `"fr"`)¶ Type alias

Action

¶

Interface

Properties
click: (evt: `Event`) => `void`¶
iconClass: `string`¶
tooltip: `string`¶

CollapseTo (`"to-start"` \| `"to-end"`)¶ Type alias

PartState

¶

Interface

Properties
expanded?: `boolean`¶
size?: `number`¶

ElementDimensions

¶

Interface

Properties
height: `number`¶
width: `number`¶

SplitOrientation (`"horizontal"` \| `"vertical"`)¶ Type alias

SiSplitPartComponent

¶

Class

▶

Constructor
() => `{}`¶

Properties
Action buttons displayed in the split part header. actions: `InputSignal`<`Action`[]> = `[]`¶
actualSize: `Signal`<`number`> = ...¶
after: `WritableSignal`<(`SiSplitPartComponent` \| `undefined`)> = ...¶
before: `WritableSignal`<(`SiSplitPartComponent` \| `undefined`)> = ...¶
Emits when the part is collapsed or expanded. collapseChanged: `OutputEmitterRef`<`boolean`> = ...¶
Internal, mutable collapse direction. Initialized from the collapsible input but can be overwritten while cascading collapse state to sibling parts. collapseDirectionState: `WritableSignal`<(`CollapseTo` \| `undefined`)> = ...¶
collapsedSize: `Signal`<`number`> = ...¶
Internal, mutable collapsed state. Initialized from the expanded input but can be overwritten while toggling, cascading to sibling parts or restoring the persisted ui state. collapsedState: `WritableSignal`<`boolean`> = ...¶
Sets the icon class that is used in the buttons of split parts to collapse and uncollapse the parts. collapseIconClass: `InputSignal`<(`string` \| `undefined`)> = ...¶
Aria label for collapse button. Needed for a11y collapseLabel: `InputSignal`<`TranslatableString`> = $localize`:@@SI_SPLIT.COLLAPSE_LABEL:Collapse`¶
This 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. collapseOthers: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
Collapse only to the given min size. collapseToMinSize: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
Defines whether and in which direction the split part can collapse. When unset, the collapse button is hidden. collapsible: `InputSignal`<(`CollapseTo` \| `undefined`)> = `undefined`¶
elementRef: `ElementRef`<`HTMLElement`> = ...¶
Sets the initial expanded or collapsed state of the split part. expanded: `InputSignalWithTransform`<`boolean`, `unknown`> = `true`¶
expandedSize: `WritableSignal`<(`number` \| `undefined`)> = ...¶
fractionalSize: `WritableSignal`<(`number` \| `undefined`)> = ...¶
headerContext: { $implicit: `SiSplitPartComponent` } = ...¶
Custom template for the split part header. The template receives the component instance as implicit context. headerTemplate: `InputSignal`<(`TemplateRef`<{ $implicit: `SiSplitPartComponent` }> \| `undefined`)> = ...¶
Sets the title of the split part header. heading: `InputSignal`<(`TranslatableString` \| `undefined`)> = ...¶
icons: `Record`<`"elementDoubleRight"`, `string`> = ...¶
index: `number` = `0`¶
Minimum size in px. minSize: `InputSignalWithTransform`<`number`, `unknown`> = `0`¶
nextExpandedAfter: `Signal`<`SiSplitPartComponent`> = ...¶
When 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. removeContentOnCollapse: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
saveUIState: () => `void`¶
Defines if the header of the split part is visible. Default is true. showHeader: `InputSignalWithTransform`<`boolean`, `unknown`> = `true`¶
Expanded size. size: `InputSignalWithTransform`<`number`, (`string` \| `number`)> = ...¶
Emits the part's expanded state and size after it is toggled. stateChange: `OutputEmitterRef`<`PartState`> = ...¶
An optional stateId to uniquely identify a component instance. Required for persistence of ui state. stateId: `InputSignal`<(`string` \| `undefined`)> = ...¶
Unit for the configured size . unit: `InputSignal`<`SplitUnit`> = ...¶

Accessors
Get collapsed state. Returns True if the split part is collapsed, false is expanded. get collapsed: `boolean`¶

Methods

refreshCollapsedToEnd: () => void¶

refreshCollapseToStart: () => void¶

refreshSizePx

(orientation: SplitOrientation) => void¶

Parameters
orientation: `SplitOrientation`¶

Toggles the collapsed or expanded state.
toggleCollapse: () => void¶

ResizeObserverService

¶

Class

▶

A service wrapping ResizeObserver . This is a service for those reasons: - only one ResizeObserver should be used for performance reason. - For Angular change detection to work, explicit ngZone calls are necessary - Observable stream

Constructor
() => `{}`¶

Properties
listeners: `Map`<`Element`, `Listener`> = ...¶
resizeObserver?: `ResizeObserver`¶
timerQueue: `Map`<`number`, `QueueEntry`[]> = ...¶
zone: `NgZone` = ...¶

Methods

emitSize

(element: Element, entry: ResizeSubscriber, force: boolean = false) => void¶

Parameters
element: `Element`¶
entry: `ResizeSubscriber`¶
force: `boolean` = `false`¶

handleElement

(element: Element) => void¶

Parameters
element: `Element`¶

handleResizeSubscriber

(element: Element, entry: ResizeSubscriber) => void¶

Parameters
element: `Element`¶
entry: `ResizeSubscriber`¶

observe

(element: Element, throttle: number, emitInitial: boolean, emitImmediate: boolean) => Observable<ElementDimensions>¶

Observe the size of an element. Returns an observable with the changes.

Parameters
The element to observe element: `Element`¶
Throttle time in ms. Will emit this time after the resize throttle: `number`¶
Emit the initial size after subscribe? emitInitial?: `boolean`¶
Emit an event immediately after the size changes. Useful e.g. for visibility checks. emitImmediate?: `boolean`¶

processQueue

(queue: QueueEntry[]) => void¶

Parameters
queue: `QueueEntry`[]¶

schedule

(timeout: number, element: Element, subscriber: ResizeSubscriber, unblock: boolean, force: boolean = false) => void¶

Parameters
timeout: `number`¶
element: `Element`¶
subscriber: `ResizeSubscriber`¶
unblock: `boolean`¶
force: `boolean` = `false`¶

subscriberAdded

(entry: Listener, subscriber: ResizeSubscriber, emitInitial: boolean) => void¶

Parameters
entry: `Listener`¶
subscriber: `ResizeSubscriber`¶
emitInitial?: `boolean`¶

subscriberRemoved

(entry: Listener, subscriber: ResizeSubscriber) => void¶

Parameters
entry: `Listener`¶
subscriber: `ResizeSubscriber`¶

unschedule

(entry: ResizeSubscriber) => void¶

Parameters
entry: `ResizeSubscriber`¶

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