![]() ![]() Overview of the example application #Ĭomponents form the basic building blocks of an Vue application. If you're completely new to Vue, you might want to check out their official guide first. To get the most out of this tutorial you should already have a basic understanding of the Vue framework. Use routing to navigate between different views.Use built-in Vue directives to create and modify your views.Add interactivity to your app using gestures.Build layouts using NativeScript components.This tutorial will teach you the following: We can access the passed in id via the page's navigationContext.This tutorial introduces you to the fundamentals of building a NativeScript app with Vue by walking you through building an example app with some basic functionalities. We passed in the id of the flick card the user tapped on in the previous section as we navigate to the details page. Let's start with creating the file for our details feature with the following contents: If you've followed along this far, running the app on either platform should result in an app that resembles the one in this screenshot, with the list being scrollable vertically. As this will be shared throughout the application, let's add this to the app.css. Create flick cards #īefore we dive into creating the card below, let's create some classes for our background and text colors that we will be using in the application. If you run the app now, you should see a list of flick titles. This loops through the flicks observable array and renders the contents within the emTemplate for each entry. In the snippet above, we set the items property to flicks. ListView in NativeScript uses the items property as its data source. Open home-page.xml and add the following code: ![]() ![]() Let's start with creating the action bar with the title. The home page can be divided into two main parts, the action bar with the title and the scrollable main content area with the cards (we will talk about the cards in the next section). Next, let's break down the layout and UI elements of the home page. app/services/ import Īdd a /app/assets/ directory to your project, and copy the 3 static images over from the sample project here. To create a new NativeScript Typescript application, run the CLI command ns create with the name of the application followed by -ts. We will be using Typescript for this tutorial. To set up your development environment, follow the instructions in the Environment Setup section of the docs. You can find the complete source code of the application on GitHub Set up your environment # You'll build a master-details app that displays a list of musicals and allows you to navigate to a details page to view more information about each musical. To get the most out of this tutorial you should already have a basic understanding of JavaScript or TypeScript. NativeScript Core uses Javascript or Typescript and XML to create your applications. This tutorial introduces you to the fundamentals of NativeScript by walking you through building an example app with some basic functionalities. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |