NativeScript Vue — Stack and Wrap Layouts and Action Bars

Vue is an easy to use framework for building front end apps.

NativeScript is a mobile app framework that lets us build native mobile apps with popular front end frameworks.

In this article, we’ll look at how to build an app with NativeScript Vue.

Stack Layout with Horizontally Aligned Children

We can add stack layouts with horizontally aligned the children components.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <StackLayout backgroundColor="#3c495e">
      <Label
        text="left"
        horizontalAlignment="left"
        width="33%"
        height="70"
        backgroundColor="red"
      />
      <Label
        text="center"
        horizontalAlignment="center"
        width="33%"
        height="70"
        backgroundColor="green"
      />
      <Label
        text="right"
        horizontalAlignment="right"
        width="33%"
        height="70"
        backgroundColor="blue"
      />
      <Label
        text="stretch"
        horizontalAlignment="stretch"
        height="70"
        backgroundColor="yellow"
      />
    </StackLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the horizontalAlignment prop to the position we want to place the Label in.

Setting to 'stretch' will make the Label span the whole screen’s width.

Also, we can make child components vertically aligned.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <StackLayout orientation="horizontal" backgroundColor="#3c495e">
      <Label
        text="top"
        verticalAlignment="top"
        width="70"
        height="33%"
        backgroundColor="red"
      />
      <Label
        text="center"
        verticalAlignment="center"
        width="70"
        height="33%"
        backgroundColor="green"
      />
      <Label
        text="bottom"
        verticalAlignment="bottom"
        width="70"
        height="33%"
        backgroundColor="blue"
      />
      <Label
        text="stretch"
        verticalAlignment="stretch"
        width="70"
        backgroundColor="yellow"
      />
    </StackLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the orientation to 'horizontal' to vertically align the Label s.

Then in the Label s, we set the verticalAlignment prop instead of horizontalAlignment .

WrapLayout

The WrapLayout component lets us position items in rows or columns.

We can add a row of equally-sized items and wrap any overflowing items by default.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <WrapLayout backgroundColor="#3c495e">
      <Label text="first" width="30%" height="30%" backgroundColor="red" />
      <Label text="second" width="30%" height="30%" backgroundColor="green" />
      <Label text="third" width="30%" height="30%" backgroundColor="blue" />
      <Label text="fourth" width="30%" height="30%" backgroundColor="yellow" />
    </WrapLayout>
  </Page>
</template>

<script >
export default {};
</script>

to add the WrapLayout with Label s inside.

We can change the orientation prop to 'vertical' to wrap overflowing items into a new column.

To do this, we write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <WrapLayout orientation="vertical" backgroundColor="#3c495e">
      <Label text="first" width="30%" height="30%" backgroundColor="red" />
      <Label text="second" width="30%" height="30%" backgroundColor="green" />
      <Label text="third" width="30%" height="30%" backgroundColor="blue" />
      <Label text="fourth" width="30%" height="30%" backgroundColor="yellow" />
    </WrapLayout>
  </Page>
</template>

<script >
export default {};
</script>

ActionBar

We can use the ActionBar component to add a toolbar at the top of the activity window.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <WrapLayout></WrapLayout>
  </Page>
</template>

<script >
export default {};
</script>

to add the ActionBar component to the top of the screen.

The title prop has the text that’s displayed at the top bar.

Also, we can add more items into the ActionBar :

<template>
  <Page>
    <ActionBar>
      <StackLayout orientation="horizontal">
        <Image
          src="res://icon"
          width="40"
          height="40"
          verticalAlignment="center"
        />
        <Label text="NativeScript" fontSize="24" verticalAlignment="center" />
      </StackLayout>
    </ActionBar>
    <WrapLayout></WrapLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the verticalAlignment to 'center' to center the image vertically.

And we add the Label with the text to do the same.

We can add the app icon by setting the props for ActioBar :

<template>
  <Page>
    <ActionBar
      title="NativeScript App"
      android.icon="res://icon"
      android.iconVisibility="always"
    >
    </ActionBar>
    <WrapLayout></WrapLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the android.icon and android.iconVisible props to add the icon and make it visible.

Also, we can remove the border by setting the flat prop to 'true' :

<template>
  <Page>
    <ActionBar title="NativeScript App" flat="true" />
    <WrapLayout></WrapLayout>
  </Page>
</template>

<script >
export default {};
</script>

Conclusion

We can add stack and wrap layouts, and a top bar to our mobile app with NativeScript Vue.