Skip to content

Commit a508148

Browse files
farfromrefugfarfromrefug
committed
chore: rename to bottom-navigation
1 parent 426f71d commit a508148

File tree

14 files changed

+605
-290
lines changed

14 files changed

+605
-290
lines changed

‎demo-vue/app/main.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { install as installBottomSheet } from '@nativescript-community/ui-materi
1717
import BottomSheetPlugin from '@nativescript-community/ui-material-bottomsheet/vue';
1818
import BottomNavigationBarPlugin from '@nativescript-community/ui-material-bottomnavigationbar/vue';
1919
import TabsPlugin from '@nativescript-community/ui-material-tabs/vue';
20-
import BottomNavigationPlugin from '@nativescript-community/ui-material-bottomnavigation/vue';
20+
import BottomNavigationPlugin from '@nativescript-community/ui-material-bottom-navigation/vue';
2121
import SpeedDialPlugin from '@nativescript-community/ui-material-speeddial/vue';
2222

2323
installBottomSheet();

‎demo-vue/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"@nativescript/core": "7.0.13",
99
"@nativescript-community/text": "1.3.6",
1010
"@nativescript-community/ui-material-activityindicator": "file:../packages/activityindicator",
11-
"@nativescript-community/ui-material-bottomnavigation": "file:../packages/bottomnavigation",
11+
"@nativescript-community/ui-material-bottom-navigation": "file:../packages/bottom-navigation",
1212
"@nativescript-community/ui-material-bottomnavigationbar": "file:../packages/bottomnavigationbar",
1313
"@nativescript-community/ui-material-bottomsheet": "file:../packages/bottomsheet",
1414
"@nativescript-community/ui-material-button": "file:../packages/button",

‎packages/bottomnavigation/.npmignore renamed to ‎packages/bottom-navigation/.npmignore

File renamed without changes.

‎packages/bottom-navigation/README.md

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
[![npm](https://img.shields.io/npm/v/nativescript-material-bottom-navigation.svg)](https://www.npmjs.com/package/nativescript-material-bottom-navigation)
2+
[![npm](https://img.shields.io/npm/dt/nativescript-material-bottom-navigation.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-material-bottom-navigation)
3+
[![GitHub forks](https://img.shields.io/github/forks/Akylas/nativescript-material-components.svg)](https://github.com/Akylas/nativescript-material-components/network)
4+
[![GitHub stars](https://img.shields.io/github/stars/Akylas/nativescript-material-components.svg)](https://github.com/Akylas/nativescript-material-components/stargazers)
5+
6+
## Installation
7+
8+
### Warning :warning: :warning:
9+
From 5.x using material component will break N tab component 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-material-bottomnavigationbar) (this one is the best choice, closest to material design) or [tabs](https://www.npmjs.com/package/nativescript-material-bottom-navigation) (clone of N one, but with a little less features)
10+
11+
* `tns plugin add @nativescript-community/ui-material-bottom-navigation`
12+
13+
Be sure to run a new build after adding plugins to avoid any issues.
14+
15+
---
16+
17+
##### [Material Design Spec](https://material.io/design/components/bottom-navigation.html)
18+
19+
### Usage
20+
21+
22+
## Plain NativeScript
23+
24+
<span style="color:red">IMPORTANT: </span>_Make sure you include `xmlns:mds="@nativescript-community/ui-material-bottom-navigation"` on the Page element_
25+
26+
### XML
27+
28+
```XML
29+
<Page xmlns:mdt="@nativescript-community/ui-material-bottom-navigation">
30+
<mdt:Tabs selectedIndex="1">
31+
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
32+
<MDTabStrip>
33+
<MDTabStripItem>
34+
<Label text="Home"></Label>
35+
<Image src="font://&#xf015;" class="fas"></Image>
36+
</TabStripItem>
37+
<TabStripItem class="special">
38+
<Label text="Account"></Label>
39+
<Image src="font://&#xf007;" class="fas"></Image>
40+
</TabStripItem>
41+
<TabStripItem class="special">
42+
<Label text="Search"></Label>
43+
<Image src="font://&#xf00e;" class="fas"></Image>
44+
</TabStripItem>
45+
</TabStrip>
46+
47+
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
48+
<MDTabContentItem>
49+
<GridLayout>
50+
<Label text="Home Page" class="h2 text-center"></Label>
51+
</GridLayout>
52+
</TabContentItem>
53+
<MDTabContentItem>
54+
<GridLayout>
55+
<Label text="Account Page" class="h2 text-center"></Label>
56+
</GridLayout>
57+
</TabContentItem>
58+
<MDTabContentItem>
59+
<GridLayout>
60+
<Label text="Search Page" class="h2 text-center"></Label>
61+
</GridLayout>
62+
</TabContentItem>
63+
</Tabs>
64+
</Page>
65+
```
66+
67+
### CSS
68+
69+
```CSS
70+
MDBottomNavigation.bottom-nav {
71+
background-color: orangered;
72+
color: gold;
73+
font-size: 18;
74+
}
75+
76+
TabStripItem.tabstripitem-active {
77+
background-color: teal;
78+
}
79+
80+
TabStripItem.tabstripitem-active:active {
81+
background-color: yellowgreen;
82+
}
83+
84+
TabContentItem.first-tabcontent {
85+
background-color: seashell;
86+
color: olive;
87+
}
88+
TabContentItem.second-tabcontent {
89+
background-color: slategray;
90+
color: aquamarine;
91+
}
92+
TabContentItem.third-tabcontent {
93+
background-color: blueviolet;
94+
color: antiquewhite;
95+
}
96+
MDBottomNavigation TabStrip {
97+
highlight-color: red;
98+
}
99+
```
100+
101+
## NativeScript + Angular
102+
103+
```typescript
104+
import { NativeScriptMaterialTabsModule } from "@nativescript-community/ui-material-slider/angular";
105+
106+
@NgModule({
107+
imports: [
108+
NativeScriptMaterialTabsModule,
109+
...
110+
],
111+
...
112+
})
113+
```
114+
115+
```html
116+
<MDBottomNavigation selectedIndex="1">
117+
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
118+
<MDTabStrip>
119+
<MDTabStripItem>
120+
<Label text="Home"></Label>
121+
<Image src="font://&#xf015;" class="fas"></Image>
122+
</TabStripItem>
123+
<TabStripItem class="special">
124+
<Label text="Account"></Label>
125+
<Image src="font://&#xf007;" class="fas"></Image>
126+
</TabStripItem>
127+
<TabStripItem class="special">
128+
<Label text="Search"></Label>
129+
<Image src="font://&#xf00e;" class="fas"></Image>
130+
</TabStripItem>
131+
</TabStrip>
132+
133+
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
134+
<MDTabContentItem>
135+
<GridLayout>
136+
<Label text="Home Page" class="h2 text-center"></Label>
137+
</GridLayout>
138+
</TabContentItem>
139+
<MDTabContentItem>
140+
<GridLayout>
141+
<Label text="Account Page" class="h2 text-center"></Label>
142+
</GridLayout>
143+
</TabContentItem>
144+
<MDTabContentItem>
145+
<GridLayout>
146+
<Label text="Search Page" class="h2 text-center"></Label>
147+
</GridLayout>
148+
</TabContentItem>
149+
</MDBottomNavigation>
150+
```
151+
152+
## NativeScript + Vue
153+
154+
```javascript
155+
import BottomNavigation from '@nativescript-community/ui-material-bottom-navigation/vue';
156+
157+
Vue.use(BottomNavigation);
158+
```
159+
160+
```html
161+
<MDBottomNavigation selectedIndex="1">
162+
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
163+
<MDTabStrip>
164+
<MDTabStripItem>
165+
<Label text="Home"></Label>
166+
<Image src="font://&#xf015;" class="fas"></Image>
167+
</TabStripItem>
168+
<TabStripItem class="special">
169+
<Label text="Account"></Label>
170+
<Image src="font://&#xf007;" class="fas"></Image>
171+
</TabStripItem>
172+
<TabStripItem class="special">
173+
<Label text="Search"></Label>
174+
<Image src="font://&#xf00e;" class="fas"></Image>
175+
</TabStripItem>
176+
</TabStrip>
177+
178+
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
179+
<MDTabContentItem>
180+
<GridLayout>
181+
<Label text="Home Page" class="h2 text-center"></Label>
182+
</GridLayout>
183+
</TabContentItem>
184+
<MDTabContentItem>
185+
<GridLayout>
186+
<Label text="Account Page" class="h2 text-center"></Label>
187+
</GridLayout>
188+
</TabContentItem>
189+
<MDTabContentItem>
190+
<GridLayout>
191+
<Label text="Search Page" class="h2 text-center"></Label>
192+
</GridLayout>
193+
</TabContentItem>
194+
</MDBottomNavigation>
195+
```
196+
197+
## Attributes
198+
199+
| Name |Type| Description|
200+
| ------------- |:-------------:| -----:|
201+
| items | Array<MDTabContentItem> | Gets or sets the items of the BottomNavigation.|
202+
|selectedIndex | number | Gets or sets the selectedIndex of the BottomNavigation.|
203+
|swipeEnabled | boolean | Gets or sets the swipe enabled state of the Tabs.|
204+
|offscreenTabLimit | number | Gets or sets the number of offscreen preloaded tabs of the Tabs.|
205+
|tabStrip |TabStrip | Gets or sets the tab strip of the BottomNavigation.|
206+
|tabsPosition | "top", "bottom" | Gets or sets the position state of the Tabs. Default value: top|
207+
|iOSTabBarItemsAlignment | "leading", "justified", "center", "centerSelected" |iOS Only: Gets or set the MDCTabBarAlignment of the tab bar icons in iOS. Default value: justified|
208+
209+
## Events
210+
211+
|Name | Description|
212+
| ------------- |:-------------:| -----:|
213+
|selectedIndexChanged | Emitted when the selectedIndex property is changed.
214+
|loaded | Emitted when the view is loaded.
215+
|unloaded | Emitted when the view is unloaded.
216+
|layoutChanged | Emitted when the layout bounds of a view changes due to layout processing.

‎packages/bottomnavigation/package-lock.json renamed to ‎packages/bottom-navigation/package-lock.json

File renamed without changes.

‎packages/bottomnavigation/package.json renamed to ‎packages/bottom-navigation/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "@nativescript-community/ui-material-bottomnavigation",
2+
"name": "@nativescript-community/ui-material-bottom-navigation",
33
"version": "5.1.16",
44
"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.",
55
"main": "bottomnavigation",
@@ -16,7 +16,7 @@
1616
"tsc-win": "../../node_modules/.bin/cpy ..\\..\\src\\bottom-navigation\\index.d.ts .\\ && ..\\..\\node_modules\\.bin\\tsc --skipLibCheck -d",
1717
"build": "npm run tsc",
1818
"build.all": "npm run build && npm run build.angular",
19-
"build.angular": "../../node_modules/.bin/ng-packagr -p ../../src/bottomnavigation/angular/package.json -c ../../src/bottom-navigation/angular/tsconfig.json",
19+
"build.angular": "../../node_modules/.bin/ng-packagr -p ../../src/bottom-navigation/angular/package.json -c ../../src/bottom-navigation/angular/tsconfig.json",
2020
"clean": "../../node_modules/.bin/rimraf ./*.d.ts ./*.js ./*.js.map"
2121
},
2222
"keywords": [
@@ -43,7 +43,7 @@
4343
"license": "Apache-2.0",
4444
"repository": {
4545
"type": "git",
46-
"url": "https://github.com/nativescript-community/ui-material-components/tree/master/packages/bottomnavigation"
46+
"url": "https://github.com/nativescript-community/ui-material-components/tree/master/packages/bottom-navigation"
4747
},
4848
"readmeFilename": "README.md",
4949
"dependencies": {

‎packages/bottomnavigation/platforms/ios/Podfile renamed to ‎packages/bottom-navigation/platforms/ios/Podfile

File renamed without changes.

‎packages/bottomnavigation/tsconfig.json renamed to ‎packages/bottom-navigation/tsconfig.json

File renamed without changes.

0 commit comments

Comments
 (0)