Skip to content

Commit c9b4674

Browse files
NickIlievNickIliev
committed
initial article
1 parent ec6216e commit c9b4674

File tree

10 files changed

+155
-6
lines changed

10 files changed

+155
-6
lines changed

‎.migration_backup/package.json

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
{
2+
"name": "nativescript-sdk-examples-js",
3+
"description": "NativeScript SDK Examples",
4+
"author": "Telerik <support@telerik.com>",
5+
"version": "0.1.0",
6+
"homepage": "https://github.com/NativeScript/nativescript-sdk-examples-js",
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/NativeScript/nativescript-sdk-examples-js"
10+
},
11+
"bugs": {
12+
"url": "https://github.com/NativeScript/nativescript-sdk-examples-js/issues"
13+
},
14+
"keywords": [
15+
"NativeScript",
16+
"JavaScript",
17+
"SDK",
18+
"example",
19+
"documentation"
20+
],
21+
"license": "Apache-2.0",
22+
"nativescript": {
23+
"id": "org.nativescript.nativescriptsdkexamplesjs",
24+
"tns-android": {
25+
"version": "5.4.0"
26+
}
27+
},
28+
"dependencies": {
29+
"nativescript-theme-core": "~1.0.4",
30+
"tns-core-modules": "^5.3.1"
31+
},
32+
"devDependencies": {
33+
"eslint": "~5.9.0",
34+
"fs-extra": "^0.30.0",
35+
"markdown-snippet-injector": "^0.2.4",
36+
"nativescript-dev-typescript": "~0.9.0",
37+
"nativescript-dev-webpack": "^0.21.0",
38+
"tar.gz": "^1.0.7",
39+
"tns-platform-declarations": "^5.3.1",
40+
"tslint": "5.11.0",
41+
"typescript": "~3.1.6"
42+
},
43+
"scripts": {
44+
"lint": "eslint \"app/**/*.js\"",
45+
"tslint": "tslint -p tsconfig.json",
46+
"tsc": "tsc",
47+
"build": "node scripts/build.js",
48+
"archive": "node scripts/archive.js",
49+
"inject": "mdinject --root=app --docsroot=dist/cookbook --sourceext=\".js|.ts|.css|.xml\" --snippettitles=\"JavaScript|TypeScript|CSS|XML\"",
50+
"pretsc": "npm install",
51+
"pretslint": "npm run tsc",
52+
"prelint": "npm run tslint",
53+
"prebuild": "npm run lint",
54+
"postbuild": "npm run inject && npm run archive",
55+
"e2e": "mocha --opts ./e2e/config/mocha.opts",
56+
"update-webpack": "./node_modules/.bin/update-ns-webpack --deps --configs"
57+
}
58+
}

‎.migration_backup/tsconfig.tns.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": "./tsconfig",
3+
"compilerOptions": {
4+
"module": "es2015",
5+
"moduleResolution": "node"
6+
}
7+
}

‎app/ns-ui-widgets-category/bottom-navigation/basics/article.md

Whitespace-only changes.

‎app/ns-ui-widgets-category/bottom-navigation/basics/basics-page.xml

Whitespace-only changes.

‎app/ns-ui-widgets-category/bottom-navigation/bottom-navigation-page.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const ListViewLinksModel = require("../../links-view-model");
2+
const link = require("../../link");
3+
const navigationLinks = [
4+
new link("Basics", "ns-ui-widgets-category/bottom-navigation/basics/basics-page")
5+
// new link("Styling", "ns-ui-widgets-category/tab-view/styling/styling-page"),
6+
// new link("Title Icon Fonts", "ns-ui-widgets-category/tab-view/title-icon-fonts/title-icon-fonts-page"),
7+
// new link("Code Behind", "ns-ui-widgets-category/tab-view/code-behind/code-behind-page"),
8+
// new link("Navigation", "ns-ui-widgets-category/tab-view/navigation/navigation")
9+
];
10+
const navigationLinksTsc = [
11+
// new link("Code Behind", "ns-ui-widgets-category/tab-view/code-behind/code-behind-ts-page"),
12+
// new link("Navigation", "ns-ui-widgets-category/tab-view/navigation/navigation-ts-page")
13+
];
14+
function onNavigatingTo(args) {
15+
const page = args.object;
16+
17+
page.bindingContext = new ListViewLinksModel({
18+
links: navigationLinks,
19+
actionBarTitle: args.context.title,
20+
showTypeScriptExamples:false,
21+
tsclinks: navigationLinksTsc
22+
});
23+
}
24+
exports.onNavigatingTo = onNavigatingTo;

‎app/ns-ui-widgets-category/bottom-navigation/bottom-navigation-page.xml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
2+
xmlns:myList="components"
3+
navigatingTo="onNavigatingTo"
4+
navigatedTo="onNavigatedTo">
5+
<Page.actionBar>
6+
<ActionBar title="{{ actionBarTitle == null ? '' : actionBarTitle }}" icon="" class="action-bar"/>
7+
</Page.actionBar>
8+
9+
<myList:list/>
10+
</Page>

‎app/ns-ui-widgets-category/bottom-navigation/end.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
**API Reference for the** [BottomNavigation Class](http://docs.nativescript.org/api-reference/classes/_ui_bottom_navigation_.button.html)
2+
3+
**Native Component**
4+
5+
| Android | iOS |
6+
|:----------------------|:---------|
7+
| [FrameLayout](https://developer.android.com/reference/android/widget/FrameLayout) | [UITabViewController](https://developer.apple.com/documentation/uikit/uitabbarcontroller?language=objc) |

‎app/ns-ui-widgets-category/bottom-navigation/metadata.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: BottomNavigation
3+
description: The NativeScript's BottomNavigation component provides a simple way to navigate between different views while providing common UI for both iOS and Android platforms. The recommended scenario suitable for BottomNavigation is a high level navigaiton with 3 to 5 tabs each with separate function.
4+
position: 190
5+
slug: bottom-navigation
6+
---

‎app/ns-ui-widgets-category/bottom-navigation/overview.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
The `BottomNavigation` component provides a simple way to navigate between different views while providing common UI for both iOS and Android platforms. The recommended scenario suitable for `BottomNavigation` is a high level navigaiton with 3 to 5 tabs each with separate function. For additional information and details about bottom navigation refer to [the Material Design guidelines](https://material.io/design/components/bottom-navigation.html#usage).
3+
4+
Component Primary Objectives:
5+
- Used for High Level navigation.
6+
- Greater UX a structure with 3 to 5 different options.
7+
8+
Limitations
9+
- No support for navigation transitions.
10+
- No navigation gestures (e.g., swipe to navigate).
11+
- No support for content preloading.
12+
13+
14+
15+
<!--
16+
17+
The `TabView` component provides a simple way to navigate between different views by tapping on some of the tabs or by swiping between the views.
18+
By default the `TabView` will load the view of the first tab, however it's possible to load alternative tabs when the app starts by setting the component’s `selectedIndex` property.
19+
20+
<----snippet id='tab-view-require'/>
21+
<----snippet id='tab-view-import'/>
22+
23+
The general behavior of the `TabView` component is to load its items on demand. This means that every `TabViewItem` view will be loaded when it is shown and will be unloaded when it disappears. Respectively, the `loaded` and `unloaded` events will be fired when navigating between views. However, there are some specifics for each platform (iOS and Android), which are described in the notes below.
24+
25+
> Note (iOS specific): The iOS implementation uses `UITabBarController`. This means that only one `TabViewItem` can be shown at a given time and only one needs to be loaded. When the user selects a new `TabViewItem`, we load the new item and unload the previous one.
26+
27+
> Note (Android specific): The Android implementation uses a `ViewPager` control, which allows using the `swipe` gesture to navigate to the next or previous tab. This means that only one `TabViewItem` can be shown, but multiple `TabViewItems` need to be loaded to the side. If this is not done, you will not be able to see the next `TabViewItem` contents during the swipe. By default, the `ViewPager` control will pre-load one `TabViewItem` on the left and on on the right. Regarding that, if one of the items is already pre-loaded, it will not be loaded again. In NativeScript, we have exposed a property called `androidOffscreenTabLimit`, which allows specifying how many components should be pre-loaded to the sides (if you are setting up `androidOffscreenTabLimit` to 0, and using a nativescript version lower than 5, the Android behavior will match to the iOS behavior).
28+
29+
The iOS and Android UX guidelines regarding the Tab controls differ greatly. The difference is described in the below points:
30+
31+
* The iOS tabs have their tab bar, which will be displayed always on the bottom and does not allow swipe gesture for changing tabs.
32+
* The Android tabs are on top and will enable the swipe navigation between the tabs.
33+
* For Android we have `androidTabsPosition` property which has two options `top`(default value) and `bottom`. Setting up this property to `bottom` allows mimicking Bottom Tab Navigation control(provided by android support library v25 release). Setting the Tabs at the bottom will disable the swipe navigation and the items preloading functionality.
34+
35+
-->

‎package.json

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,24 +21,26 @@
2121
"license": "Apache-2.0",
2222
"nativescript": {
2323
"id": "org.nativescript.nativescriptsdkexamplesjs",
24+
"tns-ios": {
25+
"version": "6.0.0-2019-06-27-154632-01"
26+
},
2427
"tns-android": {
25-
"version": "5.4.0"
28+
"version": "6.0.0-2019-06-28-082007-01"
2629
}
2730
},
2831
"dependencies": {
2932
"nativescript-theme-core": "~1.0.4",
30-
"tns-core-modules": "^5.3.1"
33+
"tns-core-modules": "next"
3134
},
3235
"devDependencies": {
3336
"eslint": "~5.9.0",
3437
"fs-extra": "^0.30.0",
3538
"markdown-snippet-injector": "^0.2.4",
36-
"nativescript-dev-typescript": "~0.9.0",
37-
"nativescript-dev-webpack": "^0.21.0",
39+
"nativescript-dev-webpack": "next",
3840
"tar.gz": "^1.0.7",
39-
"tns-platform-declarations": "^5.3.1",
41+
"tns-platform-declarations": "next",
4042
"tslint": "5.11.0",
41-
"typescript": "~3.1.6"
43+
"typescript": "3.4.1"
4244
},
4345
"scripts": {
4446
"lint": "eslint \"app/**/*.js\"",

0 commit comments

Comments
 (0)