Layout

Concluding modified: March 15, 2022

1 Introduction

Layouts specify what comes where. Each page is based on a layout. The layout contains widgets and structures that return on every folio based on that layout. For case, it is common to put a menu bar widget in a layout so that the menu is visible on all pages.

A layout consists of content and placeholders. The content is everything that should be present in every page that uses the layout, from navigation bars to sign-out buttons. Placeholders are empty areas that later form the canvas for any pages that brand apply of the layout. The layout content remains the same in every page, but the placeholders comprehend what is unique to every individual page.

Layouts tin can be based on other layouts, in which example the generic layout is referred to as the chief layout. If a layout has a master layout, it tin can use the placeholders defined in the chief to create a more than specialized configuration. If a page is based on this specialized layout, it makes use of the placeholders defined in the new layout, ignoring those of the master layout. This chain tin can be every bit long every bit is necessary, with a generic layout used throughout the app as a master layout for a more specific data input layout which is, in plow, used as a master layout for a specialized edit user layout.

When opening a new page in the browser, the content found in the layouts is not reloaded if the layout is re-used by the new page. That is, if a user transitions from folio A to page B, both of which use layout X, the placeholder content is refreshed, only the layout content is unaffected. This allows for navigation between pages without losing valuable input or performing a costly refresh on elements that do not require one. Instance scenarios include a tab container that does not require the user to select the right tab every time a new page is opened, or a sidebar bill of fare with user input that should not be cleared after every single refresh.

two Backdrop

An case of layout backdrop is represented in the epitome below:

Example of the layout properties pane

Layout properties consist of the post-obit sections:

  • Common
  • Designer
  • General

2.1 Common Section

For more data on backdrop in this section, run across the Mutual Section section in Properties Common in the Page Editor.

2.two Designer Section

2.two.one Canvas Width

Canvas width defines the width in pixels of the page in the page editor. It is purely used for editing purposes; this belongings has no effect on the width of the page in the bodily application.

Default value: 800

2.2.2 Canvas Peak

Sheet elevation defines the preferred minimum height in pixels of the page in the page editor. It is purely used for editing purposes; this property has no result on the height of the page in the actual application.

Default value: 600

ii.three General Properties

2.3.1 Platform

Platform can merely be ready when a layout is created.

Dialog for adding a new layout

The values for the platform property are:

  • Web (default) – these layouts are used for pages which are going to be displayed in a browser or hybrid mobile app
  • Native – these layouts are used for pages which are going to be displayed in a native mobile app

For existing layouts, the value is read-only.

2.three.two Master Layout

Master layout specifies a layout on which this layout is based. If no master layout is specified, the layout contains a single widget (for instance, a scroll container) that defines the construction of pages based on this layout. If a main layout is specified, this layout fills the gaps defined by the principal layout. You tin innovate new gaps in this layout by using placeholders.

2.3.3 Layout Blazon

The layout type, determines the purpose of the layout and how a page using the layout is opened.

2.3.3.1 Web Layout Types
Layout Type Clarification
Responsive Pages that will work fine on all types of devices.
Tablet specific Pages to be displayed on a tablet considering the responsive option does not provide a good user interface on a tablet.
Phone specific Pages to be displayed on a phone because the responsive option does non provide a good user interface on a phone.
Modal popular-up Pages that appear equally modal pop-upwardly windows.
Pop-up Pages that appear as modeless pop-upward windows.
2.3.3.two Native Layout Types
Layout Type Description
Default Pages that can be used for all purposes.
Pop-upwardly Pages that slide in from the bottom and have a shut icon instead of a back icon in the header. When a folio with a default layout is open, all pop-upwardly pages are dismissed and removed from the history.

Layouts can contain the following widgets:

  • Layout grid
  • Scroll container
  • Placeholder
  • Header
  • Sidebar toggle

Placeholder, header, and sidebar toggle are unique to layouts, whilst Layout grids and curl containers tin likewise be used on pages.