@nativescript-community/ui-material-bottom-navigation 7.0.31 → 7.0.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +45 -39
  3. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [7.0.32](https://github.com/nativescript-community/ui-material-components/compare/v7.0.31...v7.0.32) (2022-12-09)
7
+
8
+ **Note:** Version bump only for package @nativescript-community/ui-material-bottom-navigation
9
+
10
+
11
+
12
+
13
+
6
14
  ## [7.0.31](https://github.com/nativescript-community/ui-material-components/compare/v7.0.30...v7.0.31) (2022-12-01)
7
15
 
8
16
  **Note:** Version bump only for package @nativescript-community/ui-material-bottom-navigation
package/README.md CHANGED
@@ -19,11 +19,6 @@ Material Design's [Bottom navigation](https://material.io/components/bottom-navi
19
19
 
20
20
  ## Installation
21
21
 
22
- ### :warning: Warning :warning:
23
- From NativeScript 5.x using this component will break the [NativeScript tab component](https://docs.nativescript.org/ui/components/tabs) on iOS (which is bound to be removed). This is needed to allow using the latest native iOS features. If needed you can use either [bottomnavigationbar](https://www.npmjs.com/package/@nativescript-community/ui-material-bottomnavigationbar) (this one is the best choice, closest to material design) or [material-tabs](https://www.npmjs.com/package/@nativescript-community/ui-material-tabs) (clone of the NativeScript one, but with a little less features).
24
-
25
- ##
26
-
27
22
  ```bash
28
23
  ns plugin add @nativescript-community/ui-material-bottom-navigation
29
24
  ```
@@ -44,40 +39,51 @@ IMPORTANT: _Make sure you include `xmlns:mds="@nativescript-community/ui-materia
44
39
 
45
40
  ```XML
46
41
  <Page xmlns:mdt="@nativescript-community/ui-material-bottom-navigation">
47
- <mdt:BottomNavigation selectedIndex="1">
48
- <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
49
- <mdt:MDTabStrip>
50
- <mdt:MDTabStripItem>
51
- <Label text="Home"></Label>
52
- <Image src="font://&#xf015;" class="fas"></Image>
53
- </mdt:MDTabStripItem>
54
- <mdt:MDTabStripItem class="special">
55
- <Label text="Account"></Label>
56
- <Image src="font://&#xf007;" class="fas"></Image>
57
- </mdt:MDTabStripItem>
58
- <mdt:MDTabStripItem class="special">
59
- <Label text="Search"></Label>
60
- <Image src="font://&#xf00e;" class="fas"></Image>
61
- </mdt:MDTabStripItem>
62
- </mdt:MDTabStrip>
63
-
64
- <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
65
- <mdt:MDTabContentItem>
66
- <GridLayout>
67
- <Label text="Home Page" class="h2 text-center"></Label>
68
- </GridLayout>
69
- </mdt:MDTabContentItem>
70
- <mdt:MDTabContentItem>
71
- <GridLayout>
72
- <Label text="Account Page" class="h2 text-center"></Label>
73
- </GridLayout>
74
- </mdt:MDTabContentItem>
75
- <mdt:MDTabContentItem>
76
- <GridLayout>
77
- <Label text="Search Page" class="h2 text-center"></Label>
78
- </GridLayout>
79
- </mdt:MDTabContentItem>
80
- </mdt:BottomNavigation>
42
+ <mdt:BottomNavigation width="100%" id="main-tabview" class="main-tabview"
43
+ selectedIndexChanged="{{onSelectedIndexChanged}}"
44
+ iosOverflowSafeArea="true" selectedIndex="0" tabsPosition="bottom" swipeEnabled="false">
45
+ <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
46
+ <mdt:TabStrip backgroundColor="{{ color('dark')}}" color="{{ color('blue')}}">
47
+ <mdt:TabStripItem class="tab-item">
48
+ <Image src="font://&#xe1b0;" class="fal"></Image>
49
+ <Label text="Home" ios:fontSize="10" android:fontSize="12"></Label>
50
+ </mdt:TabStripItem>
51
+ <mdt:TabStripItem class="tab-item">
52
+ <Label text="{{ L('search') }}" ios:fontSize="10" android:fontSize="12"></Label>
53
+ <Image src="font://&#xe024;" class="fal"></Image>
54
+ </mdt:TabStripItem>
55
+ <mdt:TabStripItem class="tab-item">
56
+ <Label text="{{ L('trips') }}" ios:fontSize="10" android:fontSize="12"></Label>
57
+ <Image src="font://&#xf03a;" class="fal"></Image>
58
+ </mdt:TabStripItem>
59
+ <mdt:TabStripItem class="tab-item">
60
+ <Label text="{{ L('inbox') }}" ios:fontSize="10" android:fontSize="12"></Label>
61
+ <Image src="font://&#xf4b6;" class="fal" id="tab-inbox-icon-fal"></Image>
62
+ </mdt:TabStripItem>
63
+ </mdt:TabStrip>
64
+
65
+ <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
66
+ <mdt:TabContentItem>
67
+ <GridLayout>
68
+ <Label text="Home" class="h2 text-center"></Label>
69
+ </GridLayout>
70
+ </mdt:TabContentItem>
71
+ <mdt:TabContentItem>
72
+ <GridLayout>
73
+ <Label text="Search Page" class="h2 text-center"></Label>
74
+ </GridLayout>
75
+ </mdt:TabContentItem>
76
+ <mdt:TabContentItem>
77
+ <GridLayout>
78
+ <Label text="TRansactions" class="h2 text-center"></Label>
79
+ </GridLayout>
80
+ </mdt:TabContentItem>
81
+ <mdt:TabContentItem>
82
+ <GridLayout>
83
+ <Label text="Inbox" class="h2 text-center"></Label>
84
+ </GridLayout>
85
+ </mdt:TabContentItem>
86
+ </mdt:BottomNavigation>
81
87
  </Page>
82
88
  ```
83
89
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nativescript-community/ui-material-bottom-navigation",
3
- "version": "7.0.31",
3
+ "version": "7.0.32",
4
4
  "description": "Material Design Bottom Navigation bars allow movement between primary destinations in an app. Tapping on a bottom navigation icon takes you directly to the associated view or refreshes the currently active view.",
5
5
  "main": "bottomnavigation",
6
6
  "sideEffects": false,
@@ -52,8 +52,8 @@
52
52
  },
53
53
  "readmeFilename": "README.md",
54
54
  "dependencies": {
55
- "@nativescript-community/ui-material-core": "^7.0.31",
56
- "@nativescript-community/ui-material-core-tabs": "^7.0.31"
55
+ "@nativescript-community/ui-material-core": "^7.0.32",
56
+ "@nativescript-community/ui-material-core-tabs": "^7.0.32"
57
57
  },
58
- "gitHead": "368b79904e50cd073167d3254ca4785199b1f660"
58
+ "gitHead": "9b2fd6c912cea8e91ba541f73f20ada3281946c9"
59
59
  }