Skip to main content
Version: Current


Home > @genesislcap/foundation-layout

foundation-layout package


FoundationLayoutTop level web component which is used to initialise a custom layout
FoundationLayoutItemFoundationLayoutItem is a custom element that represents an item in the layout.
FoundationLayoutRegionFoundationLayoutRegion is a custom element that represents a region in the layout.


LayoutComponentWithStateInterface to implement on an item which is a component of the layout and you wish to serialise state with. This is saved separately for each instance of the component, which allows you to restore multiple instances of the same component with different state.
RegisteredElementConfigThe parameters that can be set on a new item when being added by the FoundationLayout.addItem() API



Default time in milliseconds for the layout to buffer calls to reloading the layout while the declarative API is loading.

During the first load of the layout, a loading spinner will be shown.

foundationLayoutComponentsRegistration object to register the layout with your design system.
LAYOUT_ICONSA collection of SVG icons in base64 format.
LAYOUT_POPOUT_CONTAINER_CLASS(BETA) Put this classname on an element which is a DOM parent of the layout, and if the layout goes into popout mode then it will place itself as the only child for the popout container you set.

Defines events that the layout system emits

'firstLoaded' - emitted when the layout has finished loading the first time using the declarative API after DEFAULT_RELOAD_BUFFER ms.
'itemAdded' - emitted when an item is added to the layout'
'itemRemoved' - emitted when an item is removed from the layout'
'itemResized' - emitted when the user drags the divider to resize elements


Defines events that the layout system listens for

'changeTitle' - emit this from a contained item to update the title of the window that contains it. 'autosave' - emit this from a contained item to hint to the layout system that it should autosave the layout. A contained item should do this if it has just changed some state it would like to persist. See LayoutComponentWithState.

layoutStylesElementStyles which defines the css for FoundationLayout.
layoutTemplateViewTemplate which defines the html for FoundationLayout.

Type Aliases

Type AliasDescription
CustomButtonDefinition of a custom button which will be added to all layout items.

Defines the shape of the detail that the layout listens works with for events it listens on

'changeTitle' - title is the string you want to set. For mode: replace will set the title to be title, suffix will append title to the end of the existing title. 'autosave' - no other parameters.

LayoutRegionTypeUnion type describing the three different types of region splits. Set on the type attribute on FoundationLayoutRegion.
PlacementWhere to and how to add the new item(s) into the layout when using the FoundationLayout.addItem() API.
SerialisedLayoutVersioned layout config objects. v is the version and c contains the layout config.