Skip to content

Commit 5e48adf

Browse files
farfromrefugfarfromrefug
committed
feat(bottomnavigation): new N bottom-navigation replace component
1 parent 89fb903 commit 5e48adf

File tree

8 files changed

+464
-1
lines changed

8 files changed

+464
-1
lines changed

‎packages/bottomnavigation/.npmignore

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
*.map
2+
*.ts
3+
!*.d.ts
4+
.DS_Store
5+
tsconfig.json
6+
scripts/*
7+
platforms/android/*
8+
!platforms/android/include.gradle
9+
!platforms/android/*.aar
10+
!platforms/android/*.jar
11+

‎packages/bottomnavigation/README.md

Lines changed: 274 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,274 @@
1+
# Nativescript Material Bottom Navigation
2+
3+
Nativescript plugin for Android & iOS to have the Bottom Navigation Bar following the Material Design Guidelines.
4+
5+
[![npm](https://img.shields.io/npm/v/nativescript-material-bottomnavigation.svg)](https://www.npmjs.com/package/nativescript-material-bottomnavigation) [![npm](https://img.shields.io/npm/dt/nativescript-material-bottomnavigation.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-material-bottomnavigation)
6+
7+
<img alt="iOS" src="screenshots/screenshot-ios.png" width="250">
8+
9+
## Contents
10+
11+
1. [Installation](#installation)
12+
2. [Usage with Javascript](#usage)
13+
3. [Usage with Angular](#angular)
14+
4. [Usage with Vue](#vue)
15+
5. [Css Styling](#css-styling)
16+
6. [API](#api)
17+
18+
### Prerequisites / Requirements
19+
20+
You need the version of NS6 or later to use this plugin.
21+
22+
### Installation
23+
For N 7.0
24+
* `tns plugin add @nativescript-community/ui-material-bottomnavigation`
25+
26+
For N 6.x
27+
* `tns plugin add nativescript-material-bottomnavigation`
28+
29+
### NEW FEATURES
30+
31+
- `Badge` now are supported using the method: `showBadge(index, value)`
32+
- NOTE: if you want to show a badge as a red dot no value should be passed to the function.
33+
34+
### Usage
35+
36+
Before start using the plugin you need to add the icons for Android & iOS in your `App_Resources` directory.
37+
38+
#### XML
39+
40+
You can set the tabs using the `tabs` property
41+
42+
```xml
43+
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
44+
xmlns:mdc="@nativescript-community/ui-material-bottomnavigation"
45+
loaded="pageLoaded"
46+
class="page">
47+
<GridLayout rows="*, auto">
48+
<StackLayout row="0">
49+
<Label text="content"></Label>
50+
</StackLayout>
51+
<mdc:bottomnavigation
52+
tabs="{{ tabs }}"
53+
activeColor="green"
54+
inactiveColor="red"
55+
backgroundColor="black"
56+
tabSelected="tabSelected"
57+
row="1"
58+
></mdc:bottomnavigation>
59+
</GridLayout>
60+
</Page>
61+
```
62+
63+
```typescript
64+
import { EventData } from '@nativescript/core/data/observable';
65+
import { Page } from '@nativescript/core/ui/page';
66+
import { BottomNavigationTab, TabSelectedEventData } from '@nativescript-community/ui-material-bottomnavigation';
67+
68+
// Event handler for Page 'loaded' event attached in main-page.xml
69+
export function pageLoaded(args: EventData) {
70+
// Get the event sender
71+
let page = <Page>args.object;
72+
page.bindingContext = {
73+
tabs: [
74+
new BottomNavigationTab({ title: 'First', icon: 'res://ic_home' }),
75+
new BottomNavigationTab({
76+
title: 'Second',
77+
icon: 'res://ic_view_list',
78+
isSelectable: false
79+
}),
80+
new BottomNavigationTab({ title: 'Third', icon: 'res://ic_menu' })
81+
]
82+
};
83+
}
84+
85+
export function tabSelected(args: TabSelectedEventData) {
86+
console.log('tab selected ' + args.newIndex);
87+
}
88+
```
89+
90+
or you can add the tabs directly in your xml view
91+
92+
```xml
93+
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
94+
xmlns:mdc="@nativescript-community/ui-material-bottomnavigation"
95+
loaded="pageLoaded"
96+
class="page">
97+
<GridLayout rows="*, auto">
98+
<StackLayout row="0">
99+
<Label text="content"></Label>
100+
</StackLayout>
101+
<mdc:bottomnavigation
102+
activeColor="green"
103+
inactiveColor="red"
104+
backgroundColor="black"
105+
tabSelected="tabSelected"
106+
row="1"
107+
>
108+
<mdc:BottomNavigationTab title="First" icon="res://ic_home" />
109+
<mdc:BottomNavigationTab title="Second" icon="res://ic_view_list" isSelectable="false" />
110+
<mdc:BottomNavigationTab title="Third" icon="res://ic_menu" />
111+
       </mdc:bottomnavigation>
112+
</GridLayout>
113+
</Page>
114+
```
115+
116+
#### Angular
117+
118+
First you need to include the `NativeScriptMaterialbottomnavigationModule` in your `app.module.ts``
119+
120+
```typescript
121+
import { NativeScriptMaterialbottomnavigationModule} from "@nativescript-community/ui-material-bottomnavigation/angular";
122+
123+
@NgModule({
124+
imports: [
125+
NativeScriptMaterialbottomnavigationModule
126+
],
127+
...
128+
})
129+
```
130+
131+
```html
132+
<GridLayout rows="*, auto">
133+
<StackLayout row="0">
134+
<label text="content"></label>
135+
</StackLayout>
136+
<bottomnavigation
137+
[tabs]="tabs"
138+
activeColor="red"
139+
inactiveColor="yellow"
140+
backgroundColor="black"
141+
(tabSelected)="onBottomNavigationTabSelected($event)"
142+
(tabPressed)="onBottomNavigationTabPressed($event)"
143+
row="1"
144+
></bottomnavigation>
145+
</GridLayout>
146+
```
147+
148+
or you can declare the `BottomNavigationTab` in your html directly
149+
150+
```html
151+
<GridLayout rows="*, auto">
152+
<StackLayout row="0">
153+
<label text="content"></label>
154+
</StackLayout>
155+
<bottomnavigation
156+
activeColor="red"
157+
inactiveColor="yellow"
158+
backgroundColor="black"
159+
(tabSelected)="onBottomNavigationTabSelected($event)"
160+
(tabPressed)="onBottomNavigationTabPressed($event)"
161+
row="1"
162+
>
163+
<BottomNavigationTab title="First" icon="res://ic_home"></BottomNavigationTab>
164+
<BottomNavigationTab title="Second" icon="res://ic_view_list" [isSelectable]="false"></BottomNavigationTab>
165+
<BottomNavigationTab title="Third" icon="res://ic_menu"></BottomNavigationTab>
166+
</bottomnavigation>
167+
</GridLayout>
168+
```
169+
170+
#### Vue
171+
172+
If you want to use this plugin with Vue, do this in your `app.js` or `main.js`:
173+
174+
```javascript
175+
import bottomnavigation from '@nativescript-community/ui-material-bottomnavigation/vue';
176+
177+
Vue.use(bottomnavigation);
178+
```
179+
180+
This will install and register `bottomnavigation` and `BottomNavigationTab` components to your `Vue` instance and now you can use the plugin as follows:
181+
182+
```html
183+
<GridLayout rows="*, auto">
184+
<StackLayout row="0">
185+
<label text="content"></label>
186+
</StackLayout>
187+
<MDbottomnavigation activeColor="red" inactiveColor="yellow" backgroundColor="black" @tabSelected="onBottomNavigationTabSelected" row="1">
188+
<MDBottomNavigationTab title="First" icon="ic_home" />
189+
<MDBottomNavigationTab title="Second" icon="ic_view_list" isSelectable="false" />
190+
<MDBottomNavigationTab title="Third" icon="ic_menu" />
191+
</MDbottomnavigation>
192+
</GridLayout>
193+
```
194+
195+
You can find more information of how to use nativescript plugins with Vue [Here!](https://nativescript-vue.org/en/docs/getting-started/nativescript-plugins/)
196+
197+
#### CSS Styling
198+
199+
You can also use your css file to set or change the `activeColor`, `inactiveColor` & `backgroundColor` of the Bottom Navigation Bar.
200+
201+
```css
202+
.botom-nav {
203+
active-color: green;
204+
inactive-color: black;
205+
background-color: blue;
206+
}
207+
```
208+
209+
## API
210+
211+
1. [bottomnavigation](#bottom-navigation-bar)
212+
2. [BottomNavigationTab](#bottom-navigation-tab)
213+
214+
- **Properties (bindable):** Properties settable through XML/HTML
215+
- **Properties (internal):** Properties accessible through JS/TS instance
216+
- **Events:** Event properties settable thew XML/HTML
217+
218+
# Bottom Navigation Bar
219+
220+
#### Properties (bindable)
221+
222+
Properties settable through XML/HTML
223+
224+
| Property | Required | Default | Type | Description |
225+
| --------------- | -------- | --------------------------- | ---------------------------- | ------------------------------------------------------- |
226+
| tabs | true | [] | `Array<BottomNavigationTab>` | Array containing the tabs for the bottomnavigation |
227+
| titleVisibility | false | `TitleVisibility.Selected` | `TitleVisibility` | Title Visibility for each BottomNavigationTab |
228+
| activeColor | false | "black" | `String` | Color of the BottomNavigationTab when it's selected |
229+
| inactiveColor | false | "gray" | `String` | Color of the BottomNavigationTab when it's not selected |
230+
| backgroundColor | false | "white" | `String` | Color of the BottomNavigation background |
231+
232+
#### Properties (internal)
233+
234+
Properties accessible through JS/TS instance
235+
236+
| Property | Default | Type | Description |
237+
| ---------------- | --------------------------- | ---------------------------- | ------------------------------------------------------- |
238+
| items | `[]` | `Array<BottomNavigationTab>` | Array containing the tabs for the bottomnavigation |
239+
| selectedTabIndex | 0 | `Number` | Index of the selected tab |
240+
| titleVisibility | `TitleVisibility.Selected` | `TitleVisibility` | Title Visibility for each BottomNavigationTab |
241+
| activeColor | `new Color('black')` | `Color` | Color of the BottomNavigationTab when it's selected |
242+
| inactiveColor | `new Color('gray')` | `Color` | Color of the BottomNavigationTab when it's not selected |
243+
| backgroundColor | `new Color('white')` | `Color` | Color of the BottomNavigation background |
244+
245+
#### Events
246+
247+
Event properties settable thew XML/HTML
248+
249+
| Name | Type | Description |
250+
| ------------- | -------------------------------------- | ------------------------------------------------------------------------ |
251+
| tabPressed | `(args: TabPressedEventData): void` | Function fired every time the user tap a tab with `isSelectable: false` |
252+
| tabSelected | `(args: TabSelectedEventData): void` | Function fired every time the user select a new tab |
253+
| tabReselected | `(args: TabReselectedEventData): void` | Function fired every time the user select a tab that is already selected |
254+
255+
#### Methods
256+
257+
Methods accessible through JS/TS instance
258+
259+
| Property | Type | Description |
260+
| ------------------------------------------ | ------ | -------------------------------- |
261+
| `selectTab(index: number)` | `void` | Select a tab programmatically |
262+
| `showBadge(index: number, value?: number)` | `void` | Show a badge for an specific tab |
263+
264+
# Bottom Navigation Tab
265+
266+
#### Properties (bindable)
267+
268+
Properties settable through XML/HTML
269+
270+
| Property | Required | Default | Type | Description |
271+
| ------------ | -------- | ------- | --------- | ------------------------------------------- |
272+
| title | true | null | `string` | Title of the tab |
273+
| icon | true | null | `string` | Icon of the tab |
274+
| isSelectable | false | true | `boolean` | Determine if the tab can be selected or not |

‎packages/bottomnavigation/package-lock.json

Lines changed: 107 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)