feat: Tabs new features

phoenix503 · Mar 19, 2020 · 8779a81 · 8779a81
1 parent 4f87084
commit 8779a81
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 21 deletions.
diff --git a/app/ns-ui-widgets-category/tabs/end.md b/app/ns-ui-widgets-category/tabs/end.md
@@ -6,8 +6,12 @@
 |:----------|:---------|:---------------|
 | `items`   | `Array<TabContentItem>` |  Gets or sets the items of the BottomNavigation. |
 | `selectedIndex` | `number` | Gets or sets the selectedIndex of the BottomNavigation. |
+| `swipeEnabled` | `boolean` | Gets or sets the swipe enabled state of the Tabs. |
+| `offscreenTabLimit` | `number` | Gets or sets the number of offscreen preloaded tabs of the Tabs. |
 | `tabStrip`| `TabStrip` | Gets or sets the tab strip of the BottomNavigation. |
 |` tabsPosition` | _"top"_, _"bottom"_ | Gets or sets the position state of the Tabs. Default value: **top** |
+|` iOSTabBarItemsAlignment` | _"leading"_, _"justified"_, _"center"_, _"centerSelected"_  | **iOS Only:** Gets or set the MDCTabBarAlignment of the tab bar icons in iOS. Default value: **justified** |
+
 
 ### TabStrip Properties
 
@@ -16,17 +20,18 @@
 | `iosIconRenderingMode`   | _"automatic"_, _"alwaysOriginal"_, _"alwaysTemplate"_ | Gets or sets the icon rendering mode on iOS. |
 | `isIconSizeFixed` | `boolean` | When set to `true` the icon will have fixed size following the platform-specific design guidelines. Default value: `true`. |
 | `items`   | `Array<TabStripItem>` |  Gets or sets an array of strip items of the TabStrip. |
-| `highlightColor`   |  |  Gets or sets the underline color of the selected TabStripItem. |
+| `highlightColor`   | `Color` |  Gets or sets the underline color of the selected TabStripItem. |
+| `selectedItemColor`   | `Color` |  Gets or sets the color of the selected items in the tab strip. |
+| `unSelectedItemColor`   | `Color` |  Gets or sets the color of the non-selected items in the tab strip. |
 
 
 ### TabStripItem Properties
 
 | Name      | Type     | Description                                    |
 |-----------|----------|------------------------------------------------|
 | `title`   | `string` | Gets or sets the title of the tab strip entry. |
-| `iconSource` | `string` | Gets or sets the icon source of the tab strip entry. Supports local image paths (`~`), resource images (`res://`) and icon fonts (`font://`) |
-| `image`   | `Image` | Gets or sets the image of the tab strip entry.  |
-| `label`   | `Label` | Gets or sets the label of the tab strip entry.  |
+| `iconSource` | `string` | Gets or sets the icon source of the tab strip entry. Supports local image paths (`~`), resource images (`res://`) and icon fonts (`font://`). **Note:** To be used for programmatic creation of Tabs |
+| `iconClass` | `string` | Gets or sets the CSS class name of the icon in the tab strip entry. **Note:** To be used for programmatic creation of Tabs |
 
 
 ## Events
@@ -68,4 +73,4 @@
 
 | Android               | iOS      |
 |:----------------------|:---------|
-| [FrameLayout](https://developer.android.com/reference/android/widget/FrameLayout) | [UITabViewController](https://developer.apple.com/documentation/uikit/uitabbarcontroller?language=objc) | 
+| [FrameLayout](https://developer.android.com/reference/android/widget/FrameLayout) | [MDCTabBar](https://material.io/develop/ios/components/tabs/api-docs/Classes/MDCTabBar.html) | 
diff --git a/app/ns-ui-widgets-category/tabs/styling/styling-page.css b/app/ns-ui-widgets-category/tabs/styling/styling-page.css
@@ -1,4 +1,5 @@
 /* >> tabs-theming-css */
+
 Tabs.bottom-nav {
     background-color: orangered;
     color: gold;

diff --git a/app/ns-ui-widgets-category/tabs/styling/styling-page.xml b/app/ns-ui-widgets-category/tabs/styling/styling-page.xml
@@ -3,9 +3,10 @@
 		<ActionBar title="Tabs - Styling"/>
 	</Page.actionBar>
 
-    <Tabs class="bottom-nav">
+
+    <Tabs class="bottom-nav" tabPosition="top" iOSTabBarItemsAlignment="jistified">
         <!-- TabStripItem supports the CSS pseudo selector :active (see theming-page.css) -->
-        <TabStrip>
+        <TabStrip highlightColor="orangered" selectedItemColor="red" unSelectedItemColor="green">
             <TabStripItem>
                 <Label text="Home"></Label>
                 <Image src="font://&#xf015;" class="fas"></Image>

diff --git a/package.json b/package.json
@@ -22,23 +22,23 @@
   "nativescript": {
     "id": "org.nativescript.nativescriptsdkexamplesjs",
     "tns-android": {
-      "version": "6.3.1"
+      "version": "6.5.0"
     },
     "tns-ios": {
-      "version": "6.3.0"
+      "version": "6.5.0"
     }
   },
   "dependencies": {
-    "nativescript-theme-core": "^2.0.11",
-    "tns-core-modules": "^6.3.2"
+    "nativescript-theme-core": "^2.0.24",
+    "tns-core-modules": "^6.5.0"
   },
   "devDependencies": {
     "eslint": "~5.9.0",
     "fs-extra": "^0.30.0",
     "markdown-snippet-injector": "^0.2.4",
-    "nativescript-dev-webpack": "~1.4.1",
+    "nativescript-dev-webpack": "^1.5.1",
     "tar.gz": "^1.0.7",
-    "tns-platform-declarations": "^6.3.2",
+    "tns-platform-declarations": "^6.4.2",
     "tslint": "5.11.0",
     "typescript": "3.4.5"
   },

diff --git a/webpack.config.js b/webpack.config.js
@@ -14,19 +14,24 @@ const hashSalt = Date.now().toString();
 
 module.exports = env => {
     // Add your custom Activities, Services and other Android app components here.
-    const appComponents = [
+    const appComponents = env.appComponents || [];
+    appComponents.push(...[
         "tns-core-modules/ui/frame",
         "tns-core-modules/ui/frame/activity",
-    ];
+    ]);
 
-    const platform = env && (env.android && "android" || env.ios && "ios");
+    const platform = env && (env.android && "android" || env.ios && "ios" || env.platform);
     if (!platform) {
         throw new Error("You need to provide a target platform!");
     }
 
     const platforms = ["ios", "android"];
     const projectRoot = __dirname;
 
+    if (env.platform) {
+        platforms.push(env.platform);
+    }
+
     // Default destination inside platforms/<platform>/...
     const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
 
@@ -58,9 +63,8 @@ module.exports = env => {
     const appFullPath = resolve(projectRoot, appPath);
     const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
     let coreModulesPackageName = "tns-core-modules";
-    const alias = {
-        '~': appFullPath
-    };
+    const alias = env.alias || {};
+    alias['~'] = appFullPath;
 
     if (hasRootLevelScopedModules) {
         coreModulesPackageName = "@nativescript/core";
@@ -70,7 +74,8 @@ module.exports = env => {
 
     const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
     const entryPath = `.${sep}${entryModule}.ts`;
-    const entries = { bundle: entryPath };
+    const entries = env.entries || {};
+    entries.bundle = entryPath;
 
     const tsConfigPath = resolve(projectRoot, "tsconfig.tns.json");
 
@@ -250,7 +255,7 @@ module.exports = env => {
             new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
             // Copy assets to out dir. Add your own globs as needed.
             new CopyWebpackPlugin([
-                { from: { glob: "ns-ui-widgets-category/web-view/source-load/*.html" } }, 
+                { from: { glob: "ns-ui-widgets-category/web-view/source-load/*.html" } },
                 { from: { glob: "ns-ui-widgets-category/placeholder/platform-files/*.ts" } },
                 { from: { glob: "fonts/**" } },
                 { from: { glob: "**/*.jpg" } },