Skip to content

SiMainDetailContainerComponent documentation

selector
si-main-detail-container

Input Properties

NameTypeDefaultDescription
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
booleanfalseWhether 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
string''The heading of the detail area.
heading
string''The heading of the main-detail layout component, usually a page heading.
hideBackButton
booleanfalseYou 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 .
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 percentage width of the main container from the overall component width. Can be a number or 'default' , which is 32% when resizableParts is active, otherwise 50%.
minDetailSize
number300Sets the minimal width of the detail container in pixel.
minMainSize
number300Sets the minimal width of the main container in pixel.
resizableParts
booleanfalseWhether 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
stringAn optional stateId to uniquely identify a component instance. Required for persistence of ui state.
truncateHeading
booleanfalseWhether the heading should be truncated (single line) or not. Default value is false .

Output Properties

NameTypeDescription
detailsActiveChange
booleanWhether 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
booleanEmits whether the components size is large enough to display main and details views next to each other or not.
mainContainerWidthChange
(number | "default")The percentage width of the main container from the overall component width. Can be a number or 'default' , which is 32% when resizableParts is active, otherwise 50%.

Attributes and Methods

NameTypeDefaultDescription
hasLargeSize
booleanWhether the main-detail layout component has a large size or not, true if the container´s width matches or exceeds the largeLayoutBreakpoint .
(readonly) largeLayoutBreakpoint
InputSignal<number>BOOTSTRAP_BREAKPOINTS.mdMinimumA 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.

Types Documentation

(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
Properties
height: number
width: number
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
check size on all observed elements. Only use in testing!
_checkAll: () => void
(element: Element, entry: ResizeSubscriber, force: boolean = false) => void
Parameters
element: Element
entry: ResizeSubscriber
force: boolean = false
(element: Element) => void
Parameters
element: Element
(element: Element, entry: ResizeSubscriber) => void
Parameters
element: Element
entry: ResizeSubscriber
(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
(queue: QueueEntry[]) => void
Parameters
queue: QueueEntry[]
(timeout: number, element: Element, subscriber: ResizeSubscriber, unblock: boolean, force: boolean = false) => void
Parameters
timeout: number
element: Element
subscriber: ResizeSubscriber
unblock: boolean
force: boolean = false
(entry: Listener, subscriber: ResizeSubscriber, emitInitial: boolean) => void
Parameters
entry: Listener
subscriber: ResizeSubscriber
emitInitial?: boolean
(entry: Listener, subscriber: ResizeSubscriber) => void
Parameters
entry: Listener
subscriber: ResizeSubscriber
(entry: ResizeSubscriber) => void
Parameters
entry: ResizeSubscriber

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