If you want to explore the NativeScript Playground, you can start by creating a simple to-do app with the following requirements:
Basic design
(Coming soon) Basic functionality
(Coming soon) View tasks
(Coming soon) Advanced functionality
TIP: All sections of this tutorial contain a Some NativeScript basics and Requirement implementation sub-sections. You can skip the basics sub-section and jump straight to the implementation for a more hands-on approach.
All development effort for this tutorial happens in app.js
and app.css
, containing the app functionality and taking care of the app styles, respectively.
The app.js
for your newly created Vue.js project consists of a simple template
declaration without any functionality. As you drag and drop user interface components to the app, the Playground also adds a methods
block and populates it with code containing actual app functionality.
In app.js
, you'll be working in the template
block to design the user interface or in the methods
block to build the app functionality. The template
block requires NativeScript-compatible XML. The methods
block accepts both Vue.js and NativeScript JavaScript code.
Here's how your app will look at the start and at the end of this section.
Initial screen | Tab 1 | Tab 2 |
---|---|---|
The <Page>
element is the top-level user interface element of every NativeScript+Vue.js app. All other user interface elements are nested within.
The <ActionBar>
element shows an action bar for the <Page>
. A <Page>
cannot contain more than one <ActionBar>
.
Typically, after the <ActionBar>
, you will have navigation components (such as a drawer or a tab view) or layout components. These elements control the layout of your app and let you determine how to place other user interface elements inside.
Use the <TabView>
component to create a two-tab app.
<ScrollView>
block and all its contents that come with the template.<ScrollView>
components are top-level layout containers for scrollable content.<TabView>
component in its place.<TabView>
to fill the screen (set it to 100%).<TabViewItem>
elements and their contents to reflect their purpose.<Label>
components with no styling and formatting. Apply the textWrap="true"
property to the respective <Label>
components to improve the visualization of the text.new Vue({
template: `
<Page class="page">
<ActionBar title="My Tasks" class="action-bar" />
<TabView height="100%">
<TabViewItem title="To Do">
<Label text="This tab will list active tasks and will let users add new tasks." textWrap="true" />
</TabViewItem>
<TabViewItem title="Completed">
<Label text="This tab will list completed tasks for tracking." textWrap="true" />
</TabViewItem>
</TabView>
</Page>
`,
}).$start();