Layout management

Rapid layout is a module that enables users to perform actions such as dragging, resizing, and re-ordering windows.

As a developer you can either implement the above with low effort, or you can build on it to create powerful interactions - such as dynamically adding and removing items, and saving and loading layouts.

Use cases:

Enable the user to alter the layout of the page, such as dragging and resizing items.
Create a system where the user can choose items dynamically from menus or lists to configure their own layout.
Enable the user to choose from a list of pre-configured layouts, or to save and load their own layouts.

You should not use this module if you simply need some fixed items on a static layout.

tip

See complete set of API documentation here

Example

Click and drag each title to re-order the items, and to create tabs. Drag the handles between items to resize the items.

Rapid Button

Rapid Checkbox

Hello World

Genesis
React
Angular

Declaration:

<rapid-layout>
  <rapid-layout-region>
    <rapid-layout-item>
    </rapid-layout-item>
  </rapid-layout-region>
</rapid-layout>

Usage:

@customElement({
  name: 'layout-example',
  template: html`
    <rapid-layout>
      <rapid-layout-region>
        <rapid-layout-region type="vertical">
          <rapid-layout-item title="Button">
            <rapid-button>Rapid Button</rapid-button>
          </rapid-layout-item>
          <rapid-layout-item title="Checkbox">
            <rapid-checkbox>Rapid Checkbox</rapid-checkbox>
          </rapid-layout-item>
        </rapid-layout-region>
        <rapid-layout-item title="Text">
          <p style="color: #FFFFFF">Hello World</p>
        </rapid-layout-item>
      </rapid-layout-region>
    </rapid-layout>
  `,
})
export class LayoutExample extends GenesisElement { }

Declaration:

<rapid-layout>
  <rapid-layout-region>
    <rapid-layout-item>
    </rapid-layout-item>
  </rapid-layout-region>
</rapid-layout>

Usage, with nested React component:

function ReactComponent({ }) {
  return (
    <p style={{ color: '#FFFFFF' }}>Hello World</p>
  );
}

export default function LayoutExample({ }) {
  return (
    <rapid-layout>
      <rapid-layout-region>
        <rapid-layout-region type="vertical">
          <rapid-layout-item title="Button">
            <rapid-button>Rapid Button</rapid-button>
          </rapid-layout-item>
          <rapid-layout-item title="Checkbox">
            <rapid-checkbox>Rapid Checkbox</rapid-checkbox>
          </rapid-layout-item>
        </rapid-layout-region>
        <rapid-layout-item title="Text">
          <ReactComponent />
        </rapid-layout-item>
      </rapid-layout-region>
    </rapid-layout>
  );
}

warning

Important! Bindings such as events and data don't work directly in the layout. See this page.

Example​

Example