You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<imgsrc="images/chapter4/ios/1.png" alt="Background image on iOS"></p>
1087
1087
<p>Let’s look at a few other NativeScript modules you can use to help improve the look of this app.</p>
1088
1088
<h3id="animations">Animations</h3>
1089
-
<p>The ability to run robust and performant animations is the one of the biggest reasons people choose to build native mobile apps, and NativeScript makes running these animations simple. The NativeScript animation modules provides a <ahref="{{site.baseurl}}/ui/animation">series of JavaScript APIs</a> that let you perform a wide variety of animations to elements on the screen, including the following:</p>
1089
+
<p>The ability to run robust and performant animations is the one of the biggest reasons people choose to build native mobile apps, and NativeScript makes running these animations simple. The NativeScript animation modules provides a <ahref="https://docs.nativescript.org/ui/animation">series of JavaScript APIs</a> that let you perform a wide variety of animations to elements on the screen, including the following:</p>
<p>Let’s add a simple animation so you can see how they work.</p>
1098
1098
<h4class="exercise-start">
@@ -1123,7 +1123,7 @@ <h4 class="exercise-start">
1123
1123
<blockquote>
1124
1124
<p><strong>NOTE</strong>: You may notice that the text color is off with the brown background. Don’t worry about that for now; we’ll address that in chapter 6.</p>
1125
1125
</blockquote>
1126
-
<p>The animation module is a lot of fun to play with, and it’s easy to use too. All you need to do is get a reference to an element using <code>getViewById()</code>, and then call that element’s <code>animate()</code> method. You may want to take a few minutes to look through our <ahref="{{site.baseurl}}/ui/animation#examples">animation samples</a> and try a few of these animations for yourself in Groceries.</p>
1126
+
<p>The animation module is a lot of fun to play with, and it’s easy to use too. All you need to do is get a reference to an element using <code>getViewById()</code>, and then call that element’s <code>animate()</code> method. You may want to take a few minutes to look through our <ahref="https://docs.nativescript.org/ui/animation#examples">animation samples</a> and try a few of these animations for yourself in Groceries.</p>
1127
1127
<p>For now, let’s move on to another commonly used NativeScript UI element: the <code><ListView></code>.</p>
1128
1128
<h3id="listview">ListView</h3>
1129
1129
<p>The ListView element lets you show a list of things on the screen, which is exactly what you need for showing a list of groceries. Before tying the grocery list to a backend API, let's start by seeing how to show a hardcoded list of items on the screen.</p>
<p>This code defines an <ahref="{{site.baseurl}}/ApiReference/ui/action-bar/ActionBar">ActionBar</a>, which is a UI component that appears on the top of the screen, and which can optionally include menu items, or <ahref="http://docs.nativescript.org/ApiReference/ui/action-bar/ActionItem"><code><ActionItem></code></a> components.</p>
1631
+
<p>This code defines an <ahref="https://docs.nativescript.org/ApiReference/ui/action-bar/ActionBar">ActionBar</a>, which is a UI component that appears on the top of the screen, and which can optionally include menu items, or <ahref="http://docs.nativescript.org/ApiReference/ui/action-bar/ActionItem"><code><ActionItem></code></a> components.</p>
1632
1632
<blockquote>
1633
1633
<p><strong>NOTE</strong>: On iOS devices, <code><ActionItem></code>s are placed from left to right in sequence; you can override that (as the code above does) by providing an <code>ios.position</code> attribute.</p>
Theabilitytorunrobustandperformantanimationsistheoneofthebiggestreasonspeoplechoosetobuildnativemobileapps, andNativeScriptmakesrunningtheseanimations simple. TheNativeScriptanimationmodulesprovidesa [seriesofJavaScriptAPIs](https://docs.nativescript.org/ui/animation) that let you perform a wide variety of animations to elements on the screen, including the following:
Theanimationmoduleisalotoffuntoplaywith, andit’seasytouse too. Allyouneedtodoisgetareferencetoanelementusing`getViewById()`, andthencallthatelement’s`animate()` method. Youmaywanttotakeafewminutestolookthroughour [animationsamples](https://docs.nativescript.org/ui/animation#examples) and try a few of these animations for yourself in Groceries.
Copy file name to clipboardExpand all lines: src/chapters/chapter5.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -162,7 +162,7 @@ Next you have to build some UI that lets you share a grocery list. To do so, ope
162
162
</ActionBar>
163
163
```
164
164
165
-
This code defines an [ActionBar]({{site.baseurl}}/ApiReference/ui/action-bar/ActionBar), which is a UI component that appears on the top of the screen, and which can optionally include menu items, or [`<ActionItem>`](http://docs.nativescript.org/ApiReference/ui/action-bar/ActionItem) components.
165
+
This code defines an [ActionBar](https://docs.nativescript.org/ApiReference/ui/action-bar/ActionBar), which is a UI component that appears on the top of the screen, and which can optionally include menu items, or [`<ActionItem>`](http://docs.nativescript.org/ApiReference/ui/action-bar/ActionItem) components.
166
166
167
167
> **NOTE**: On iOS devices, `<ActionItem>`s are placed from left to right in sequence; you can override that (as the code above does) by providing an `ios.position` attribute.
0 commit comments