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.
SegmentedBar
The SegmentedBar component lets us display a set of buttons and let us select a choice by clicking one.
For example, we can write:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<SegmentedBar>
<SegmentedBarItem title="First" />
<SegmentedBarItem title="Second" />
<SegmentedBarItem title="Third" />
</SegmentedBar>
</FlexboxLayout>
</Page>
</template>
<script >
export default {};
</script>
to add the SegmentedBar .
The flexDirection is set to 'column' so that the SegmenteBarItem s are displayed side by side.
We can also bind the selected bar item’s index to a reactive property with the v-model directive:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<SegmentedBar v-model="selectedItem">
<SegmentedBarItem
v-for="item in listOfItems"
:key="item"
:title="item.title"
/>
</SegmentedBar>
<Label :text="selectedItem" style="text-align: center" />
</FlexboxLayout>
</Page>
</template>
<script >
export default {
data() {
return {
listOfItems: [
{ title: "apple" },
{ title: "orange" },
{ title: "grape" },
],
selectedItem: 0,
};
},
};
</script>
We use v-model to bind the selectedItem reactive property to the selected index.
So when we click on an item, we’ll see the index of it displayed in the Label .
Slider
The Slider component is a UI component that shows a slider control for picking values in a specified numeric range.
For example, we can write:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<Slider v-model="value" />
<Label :text="value" style="text-align: center" />
</FlexboxLayout>
</Page>
</template>
<script >
export default {
data() {
return {
value: 0,
};
},
};
</script>
to add the numeric slider and bind the selected value to the value reactive property.
We can set the minValue and maxValue props to set the min and max values that we can choose respectively.
The default values are 0 and 100 respectively.
Switch
Then Switch component lets us add a toggle switch in our app.
For instance, we can use it by writing:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<Switch v-model="itemEnabled" />
<Label :text="itemEnabled" style="text-align: center" />
</FlexboxLayout>
</Page>
</template>
<script >
export default {
data() {
return {
itemEnabled: false,
};
},
};
</script>
We bind the toggle switch’s value to the itemEnabled reactive property with v-model .
And the selected value is displayed in the Label .
TabView
The TabView is a navigation component that shows content grouped into tabs and lets users switch between them.
For example, we can use it by writing:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout flexDirection="column">
<TabView
:selectedIndex="selectedIndex"
@selectedIndexChange="indexChange"
>
<TabViewItem title="Tab 1">
<Label text="Content for Tab 1" />
</TabViewItem>
<TabViewItem title="Tab 2">
<Label text="Content for Tab 2" />
</TabViewItem>
</TabView>
</FlexboxLayout>
</Page>
</template>
<script >
export default {
data() {
return {
selectedIndex: 0,
};
},
methods: {
indexChange({ value: newIndex }) {
this.selectedIndex = newIndex;
console.log(newIndex);
},
},
};
</script>
We add the TabView and set the selectedIndex reactive property to the value of the value property in the parameter object when the selectedIndexChange event is emitted.
The tab content is rendered by the TabViewItem component.
The Label s are the content.
Conclusion
We can add a segmented bar and tab view to add navigation into our NativeScript Vue mobile app.
Numeric slider and toggles are also provided by NativeScript Vue.
