Layout declarative HTML API

All layouts can be specified with a mixture of just three Genesis elements using just HTML templates.

Rapid layout

Top level web component, which is used to initialize a custom layout.

<rapid-layout></rapid-layout>

DOM API

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

Attributes

Attribute	Type	Use	Example
auto-save-key	string	Optional string which if set, will enable autosaving the layout under this key in local storage. See here	<rapid-layout auto-save-key=${(x) => x.autoSaveKey || 'default'}>
reload-buffer (1)	number	Numerical attribute that controls the buffer between how long the layout is reloaded. The default is 500ms. In this case, the layout is only reloaded if the child elements of the layout region are manipulated once every 500ms. This is to stop the layout being reloaded over and over for every single item during initialization. The higher the value is, the more performant the component is, but the first load will appear to take longer.	<rapid-layout reload-buffer=${(x) => x.reloadBuffer || '2000'}>

tip

(1) This only applies for usage with the declarative HTML API. When the layout first loads after this amount of time, it emits an event.

Properties

Property	Type	Use	Example
missingItemPlaceholder	(x: string) => string	Function which receives the name of a pane with a missing registration. Returns the placeholder text to be shown in the pane.	<rapid-layout :missingItemPlaceholder=${() => (n: string) => n + ' not registered.'}>
dimensionsConfig	LayoutcConfig.Dimensions	Object which configures certain size items on the layout such as the size of the drag handles or the title bar sizes.	<rapid-layout :dimensionsConfig=${(_) => ({ borderWidth: 50, })}>
customButtons	CustomButton[]	An array that contains configurations to add custom buttons to the header.	<rapid-layout :customButtons=${(_) => [{ /* config */ }]}>

Slots

Slot	Use
Default	The default slot is where a combination of <rapid-layout-item> and <rapid-layout-region> elements are placed. No other element may be placed into this slot, to put general components into the layout you must wrap them in <rapid-layout-item>

Parts

This component doesn't have any css parts.

Fired events

Events can be received by the emitting <rapid-layout>, or any parent element.

Event	Type	Use	Example
first-loaded	void	emitted when the layout has finished loading the first time	<my-component @first-loaded="${(x) => x.layoutFirstLoaded()}">
item-added	void	emitted when an item is added to the layout	<my-component @item-added="${(x) => x.layoutItemAdded()}">
item-removed	void	emitted when an item is removed from the layout	<my-component @item-removed="${(x) => x.layoutItemRemoved()}">
item-resized	void	emitted when the user drags the divider to resize elements	<my-component @item-resized="${(x) => x.layoutItemResized()}">

Listened events

Event	Type	Description	Example
autosave	LayoutReceiveEventsDetail.autosave	Hint to the layout system that it should autosave. Used if you are using the state management included, and your component has changed its state.	this.dispatchEvent(new CustomEvent(LayoutReceiveEvents.autosave, { bubbles: true }),);

Rapid layout region

An element for declaratively setting the layout structure.

<rapid-layout-region>
  <rapid-layout-item></rapid-layout-item>
  <rapid-layout-region type="tabs">
    <!-- more nested regions/items ... -->
  </rapid-layout-region>
  <!-- more nested regions/items ... -->
</rapid-layout-region>

Attributes

Attribute	Type	Use	Example
size	string	Controls the size of the region. See here.	<rapid-layout-region size="50%">
type	"vertical" | "horizontal" | "tabs"	Union type which configures the grouping type. See below. Defaults to horizontal.	<rapid-layout-region type="tabs">

Layout region types:

• vertical - Indicates to the layout system that all immediate children are (by default) to be split equally within the available space of this component using n-1 column split(s). Can be nested within other horizontal and vertical regions.
• horizontal - Indicates to the layout system that all immediate children are (by default) to be split equally among the available space of this component using n-1 row split(s). Can be nested within other horizontal and vertical regions.
• tabs - Indicates to the layout system that all immediate children are to be added as tabs in the available space of this component, with a tab for each child. The tabs are ordered according to which child the layout item is (e.g. the second <rapid-layout-item> of the tab split is the second tab). The first child will be the one that is open by default. Can be nested within horizontal and vertical regions, but cannot have more layout sections inside it.

Properties

There are no properties in addition to the properties controlled via attributes.

Slots

Slot	Use
Default	The default slot is where a combination of <rapid-layout-item> and <rapid-layout-region> elements are placed. No other element may be placed into this slot, to put general components into the layout you must wrap them in <rapid-layout-item>

Parts

This component doesn't have any css parts.

Fired events

This component doesn't fire any events.

Listened events

This component doesn't listen to any events.

Rapid layout item

A wrapper element that is required to enclose elements to be put inside of the layout. All content must be inside a layout item; otherwise, a runtime error will be thrown when the layout attempts to render itself on screen.

<rapid-layout-item title="My checkbox">
    <rapid-checkbox>Rapid Checkbox</rapid-checkbox>
    <!-- more elements... --->
</rapid-layout-item>

DOM API

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

Attributes

Attribute	Type	Use	Example
title	string	Set the title of the pane that contains the content. Defaults to Item x, where x is the pane number.	<rapid-layout-item title="My title">
closable	boolean	Controls whether the user can close the pane. Default is false.	<rapid-layout closable>
size	string	Controls the size of the pane. See here.	<rapid-layout-item size="50%">
registration	string	Sets the registered name of the component. Not required to be set unless you're also using the javascript API (see here). By default each item that doesn't have a registration is registered sequentially starting at "1".	<rapid-layout-item registration="checkbox">

Properties

There are no properties in addition to the properties controlled via attributes.

Slots

Slot	Use
Default	The default slot is the contents of the layout pane. You may put one or more elements into the default slot, and they'll all be added into the element set for this item's registration

Parts

This component doesn't have any css parts.

Fired events

This component doesn't fire any events.

Listened events

Event	Type	Description	Example
change-title	LayoutReceiveEventsDetail.changeTitle	Emit from an layout item to change the name of the title of the layout container. See example context here.	const event: LayoutReceiveEventsDetail['changeTitle'] = { title, mode: 'replace', }; elem.dispatchEvent( new CustomEvent(LayoutReceiveEvents.changeTitle, { detail: event, bubbles: true }), );

Sizing

size: optional string attribute which can be configured on both <rapid-layout-item> and <rapid-layout-region>. For rows, it specifies height. For columns, it specifies width. Has format <number><size-unit>.

Currently only supports units fr and %. Space is first proportionally allocated to items with sizeUnit %. If there is any space left over (less than 100% allocated), then the remainder is allocated to the items with unit fr according to the fractional size.

If more than 100% is allocated, then an extra 50% is allocated to items with unit fr and is allocated to each item according to its fractional size. All item sizes are then adjusted to bring the total back to 100%.