This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Position Views in a Dock Using DockLayout

    Brad MartinBrad Martin

    We will use the DockLayout component to create a layout container which allows us to specify sides (top, bottom, left, right) to dock child components to in a NativeScript app.

    nativescriptNativeScript
    >2.5.0 <4.2.0
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 Start by adding a dock layout to your page. Inside of the dock layout, we're going to layout four buttons, and they're going to take the dock property, which accepts 'top', 'left', 'right', 'bottom' as the value. We're going to color these inline with the background color, just so we know exactly where they end up inside of the dock layout.

    00:35 We'll add two more buttons. This one we'll dock to the bottom of the dock layout, and our last button, we will dock to the left. And we run this, we'll have four buttons inside of the dock layout positioned by their dock property, 'top', 'right', 'bottom', and left''. The 'top', 'right', 'bottom', and 'left' button.

    01:00 But the dock layout also provides the stretch 'last' child property, which set to 'true' is likely what you'll use in a production application, if you use the dock layout. We'll set another button with the text to fill, and we'll run this. And you're going to see this button consume all of the space in the center of the dock layout, between the other buttons that have the dock properties specified -- the 'top', 'right', 'bottom', 'left'. And here's your last child, which fills the remaining space inside of the dock layout.

    Discuss

    Discuss