NativeScript-Vue 2.0: Back to the Vueture (Webinar) is now on YouTube
DockLayout

This is an overview of the most common usage of DockLayout. For more information about the available properties, methods, or events, head over to the complete API documentation for DockLayout.

DockLayout — это макет, обеспечивающий механизм прикрепления дочерних элементов слева (left), справа (right), сверху (top), снизу (bottom) или центра макета. Для определения стороны прикрепления дочерного элемента, используйте его свойство dock. Для прикрепления элемента к центру DockLayout, он должен быть последим дочерним элементом DockLayout, а свойство stretchLastChild DockLayout должно быть установлено в true.

Примеры

Стыковка по всем сторонам без прикрепления последнего дочерного элемента

<DockLayout stretchLastChild="false" backgroundColor="#3c495e">
  <Label text="left" dock="left" width="40" backgroundColor="#43b883"/>
  <Label text="top" dock="top" height="40" backgroundColor="#289062"/>
  <Label text="right" dock="right" width="40" backgroundColor="#43b883"/>
  <Label text="bottom" dock="bottom" height="40" backgroundColor="#289062"/>
</DockLayout>

Прикрепление с обоих сторон с растяжением последнего дочернего элемента

<DockLayout stretchLastChild="true" backgroundColor="#3c495e">
  <Label text="left" dock="left" width="40" backgroundColor="#43b883"/>
  <Label text="top" dock="top" height="40" backgroundColor="#289062"/>
  <Label text="right" dock="right" width="40" backgroundColor="#43b883"/>
  <Label text="bottom" dock="bottom" backgroundColor="#1c6b48"/>
</DockLayout>

Несколько дочерних элементов на одной стороне

<DockLayout stretchLastChild="true" backgroundColor="#3c495e">
  <Label text="left 1" dock="left" width="40" backgroundColor="#43b883"/>
  <Label text="left 2" dock="left" width="40" backgroundColor="#289062"/>
  <Label text="left 3" dock="left" width="40" backgroundColor="#1c6b48"/>
  <Label text="last child" backgroundColor="#43b883"/>
</DockLayout>

Свойства

НазваниеТипОписание
stretchLastChildBooleanВключает/отключает растяжение последнего дочернего элемента для заполнения оставшегося пространства.

Дополнительные свойства дочерних элементов

Когда элемент — прямой дочерний элемент DockLayout, доступны следующие свойства:

НазваниеТипОписание
dockStringУказывает, к какой стороне состыковать элемент. Возможные значения: top, right, bottom, left
Contributors