Optional parameter specifying whether to show the modal view with animation. Тhe UI template for list view items of the list of the modal view. The source collection used to populate the list of the modal view. Changing the text of the PickerField is done by its main functionality which is opening a modal popup that shows a list of objects from which you can select one by tapping it. The only difference is that by design it is in "read-only" mode, or simply put you cannot change its text by input or select that text. We can access the passed in id via the page's navigationContext.The PickerField is a NativeScript TextField which means that any functionality the default TextField provides is also available in the PickerField component. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |