DockLayout

<DockLayout> is a layout container that lets you dock child views to the sides or the center of the layout.

<DockLayout> has the following behavior:

• Uses the dock property to dock its children to the left, right, top, bottom or center of the layout.
  To dock a child element to the center, it must be the last child of the container and you must set the stretchLastChild property of the parent to true.
• Enforces layout constraints to its children.
• Resizes its children at runtime when its size changes.

Examples ​

Dock to every side without stretching the last child ​

The following example creates a frame-like layout consisting of 4 elements, positioned at the 4 edges of the screen.

<DockLayoutstretchLastChild="false"backgroundColor="#3c495e">
 <Labeltext="left"dock="left"width="40"backgroundColor="#43B3F4" />
 <Labeltext="top"dock="top"height="40"backgroundColor="#1089CA" />
 <Labeltext="right"dock="right"width="40"backgroundColor="#43B3F4" />
 <Labeltext="bottom"dock="bottom"height="40"backgroundColor="#1089CA" />
</DockLayout>

Dock to every side and stretch the last child ​

The following example shows how stretchLastChild affects the positioning of child elements in a DockLayout container. The last child (bottom) is stretched to take up all the remaining space after positioning the first three elements.

<DockLayoutstretchLastChild="true"backgroundColor="#3c495e">
 <Labeltext="left"dock="left"width="40"backgroundColor="#43B3F4" />
 <Labeltext="top"dock="top"height="40"backgroundColor="#1089CA" />
 <Labeltext="right"dock="right"width="40"backgroundColor="#43B3F4" />
 <Labeltext="bottom"dock="bottom"backgroundColor="#075B88" />
</DockLayout>

Dock to every side and the center ​

The following example creates a <DockLayout> of 5 elements. The first four wrap the center element in a frame.

<DockLayoutstretchLastChild="true"backgroundColor="#3c495e">
 <Labeltext="left"dock="left"width="40"backgroundColor="#43B3F4" />
 <Labeltext="top"dock="top"height="40"backgroundColor="#1089CA" />
 <Labeltext="right"dock="right"width="40"backgroundColor="#43B3F4" />
 <Labeltext="bottom"dock="bottom"height="40"backgroundColor="#1089CA" />
 <Labeltext="center"backgroundColor="#075B88" />
</DockLayout>

Dock multiple children to the same side ​

The following example creates a single line of 4 elements that stretch across the entire height and width of the screen.

<DockLayoutstretchLastChild="true"backgroundColor="#3c495e">
 <Labeltext="left 1"dock="left"width="40"backgroundColor="#43B3F4" />
 <Labeltext="left 2"dock="left"width="40"backgroundColor="#1089CA" />
 <Labeltext="left 3"dock="left"width="40"backgroundColor="#075B88" />
 <Labeltext="last child"backgroundColor="#43B3F4" />
</DockLayout>

Props ​

stretchLastChild ​

stretchLastChild: boolean

Enables or disables stretching the last child to fit the remaining space.

...Inherited ​

Additional inherited properties not shown. Refer to the API Reference.

Children props ​

When an element is a direct child of <DockLayout>, these properties are accounted for:

dock ​

dock: 'top'|'right'|'bottom'|'left'

Specifies which side to dock the element to.

Contributors