Using a DockLayout requires the DockLayout module.

import * as dockModule from "tns-core-modules/ui/layouts/dock-layout";

Declaring a DockLayout

 <DockLayout stretchLastChild="true">
   <Button dock="left" text="left" style="background-color: red; margin: 5;" />
   <Button dock="top" text="top" style="background-color: lightblue; margin: 5;" />
   <Button dock="right" text="right" style="background-color: lightgreen; margin: 5;" />
   <Button dock="bottom" text="bottom" style="background-color: lightpink; margin: 5;" />
   <Button text="fill" style="background-color: wheat; margin: 5;" />

Other frequently used modules when working with a DockLayout include:

import * as enums from "tns-core-modules/ui/enums";

Create DockLayout

var dockLayout = new dockModule.DockLayout();

Add child view to layout

var btn = new button.Button();

Remove child view from layout


Setting the dock property

var btnDockedToRight = new button.Button();
dockModule.DockLayout.setDock(btnDockedToRight, "right");
Is this article helpful? Yes / No
Thank you for your feedback!

Tell us how we can improve this article

NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.