-
-
Notifications
You must be signed in to change notification settings - Fork 80
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(bottomnavigation): new N bottom-navigation replace component
- Loading branch information
1 parent
89fb903
commit 5e48adf
Showing
8 changed files
with
464 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| *.map | ||
| *.ts | ||
| !*.d.ts | ||
| .DS_Store | ||
| tsconfig.json | ||
| scripts/* | ||
| platforms/android/* | ||
| !platforms/android/include.gradle | ||
| !platforms/android/*.aar | ||
| !platforms/android/*.jar | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,274 @@ | ||
| # Nativescript Material Bottom Navigation | ||
|
|
||
| Nativescript plugin for Android & iOS to have the Bottom Navigation Bar following the Material Design Guidelines. | ||
|
|
||
| [](https://www.npmjs.com/package/nativescript-material-bottomnavigation) [](https://www.npmjs.com/package/nativescript-material-bottomnavigation) | ||
|
|
||
| <img alt="iOS" src="screenshots/screenshot-ios.png" width="250"> | ||
|
|
||
| ## Contents | ||
|
|
||
| 1. [Installation](#installation) | ||
| 2. [Usage with Javascript](#usage) | ||
| 3. [Usage with Angular](#angular) | ||
| 4. [Usage with Vue](#vue) | ||
| 5. [Css Styling](#css-styling) | ||
| 6. [API](#api) | ||
|
|
||
| ### Prerequisites / Requirements | ||
|
|
||
| You need the version of NS6 or later to use this plugin. | ||
|
|
||
| ### Installation | ||
| For N 7.0 | ||
| * `tns plugin add @nativescript-community/ui-material-bottomnavigation` | ||
|
|
||
| For N 6.x | ||
| * `tns plugin add nativescript-material-bottomnavigation` | ||
|
|
||
| ### NEW FEATURES | ||
|
|
||
| - `Badge` now are supported using the method: `showBadge(index, value)` | ||
| - NOTE: if you want to show a badge as a red dot no value should be passed to the function. | ||
|
|
||
| ### Usage | ||
|
|
||
| Before start using the plugin you need to add the icons for Android & iOS in your `App_Resources` directory. | ||
|
|
||
| #### XML | ||
|
|
||
| You can set the tabs using the `tabs` property | ||
|
|
||
| ```xml | ||
| <Page xmlns="http://schemas.nativescript.org/tns.xsd" | ||
| xmlns:mdc="@nativescript-community/ui-material-bottomnavigation" | ||
| loaded="pageLoaded" | ||
| class="page"> | ||
| <GridLayout rows="*, auto"> | ||
| <StackLayout row="0"> | ||
| <Label text="content"></Label> | ||
| </StackLayout> | ||
| <mdc:bottomnavigation | ||
| tabs="{{ tabs }}" | ||
| activeColor="green" | ||
| inactiveColor="red" | ||
| backgroundColor="black" | ||
| tabSelected="tabSelected" | ||
| row="1" | ||
| ></mdc:bottomnavigation> | ||
| </GridLayout> | ||
| </Page> | ||
| ``` | ||
|
|
||
| ```typescript | ||
| import { EventData } from '@nativescript/core/data/observable'; | ||
| import { Page } from '@nativescript/core/ui/page'; | ||
| import { BottomNavigationTab, TabSelectedEventData } from '@nativescript-community/ui-material-bottomnavigation'; | ||
|
|
||
| // Event handler for Page 'loaded' event attached in main-page.xml | ||
| export function pageLoaded(args: EventData) { | ||
| // Get the event sender | ||
| let page = <Page>args.object; | ||
| page.bindingContext = { | ||
| tabs: [ | ||
| new BottomNavigationTab({ title: 'First', icon: 'res://ic_home' }), | ||
| new BottomNavigationTab({ | ||
| title: 'Second', | ||
| icon: 'res://ic_view_list', | ||
| isSelectable: false | ||
| }), | ||
| new BottomNavigationTab({ title: 'Third', icon: 'res://ic_menu' }) | ||
| ] | ||
| }; | ||
| } | ||
|
|
||
| export function tabSelected(args: TabSelectedEventData) { | ||
| console.log('tab selected ' + args.newIndex); | ||
| } | ||
| ``` | ||
|
|
||
| or you can add the tabs directly in your xml view | ||
|
|
||
| ```xml | ||
| <Page xmlns="http://schemas.nativescript.org/tns.xsd" | ||
| xmlns:mdc="@nativescript-community/ui-material-bottomnavigation" | ||
| loaded="pageLoaded" | ||
| class="page"> | ||
| <GridLayout rows="*, auto"> | ||
| <StackLayout row="0"> | ||
| <Label text="content"></Label> | ||
| </StackLayout> | ||
| <mdc:bottomnavigation | ||
| activeColor="green" | ||
| inactiveColor="red" | ||
| backgroundColor="black" | ||
| tabSelected="tabSelected" | ||
| row="1" | ||
| > | ||
| <mdc:BottomNavigationTab title="First" icon="res://ic_home" /> | ||
| <mdc:BottomNavigationTab title="Second" icon="res://ic_view_list" isSelectable="false" /> | ||
| <mdc:BottomNavigationTab title="Third" icon="res://ic_menu" /> | ||
| </mdc:bottomnavigation> | ||
| </GridLayout> | ||
| </Page> | ||
| ``` | ||
|
|
||
| #### Angular | ||
|
|
||
| First you need to include the `NativeScriptMaterialbottomnavigationModule` in your `app.module.ts`` | ||
|
|
||
| ```typescript | ||
| import { NativeScriptMaterialbottomnavigationModule} from "@nativescript-community/ui-material-bottomnavigation/angular"; | ||
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| NativeScriptMaterialbottomnavigationModule | ||
| ], | ||
| ... | ||
| }) | ||
| ``` | ||
|
|
||
| ```html | ||
| <GridLayout rows="*, auto"> | ||
| <StackLayout row="0"> | ||
| <label text="content"></label> | ||
| </StackLayout> | ||
| <bottomnavigation | ||
| [tabs]="tabs" | ||
| activeColor="red" | ||
| inactiveColor="yellow" | ||
| backgroundColor="black" | ||
| (tabSelected)="onBottomNavigationTabSelected($event)" | ||
| (tabPressed)="onBottomNavigationTabPressed($event)" | ||
| row="1" | ||
| ></bottomnavigation> | ||
| </GridLayout> | ||
| ``` | ||
|
|
||
| or you can declare the `BottomNavigationTab` in your html directly | ||
|
|
||
| ```html | ||
| <GridLayout rows="*, auto"> | ||
| <StackLayout row="0"> | ||
| <label text="content"></label> | ||
| </StackLayout> | ||
| <bottomnavigation | ||
| activeColor="red" | ||
| inactiveColor="yellow" | ||
| backgroundColor="black" | ||
| (tabSelected)="onBottomNavigationTabSelected($event)" | ||
| (tabPressed)="onBottomNavigationTabPressed($event)" | ||
| row="1" | ||
| > | ||
| <BottomNavigationTab title="First" icon="res://ic_home"></BottomNavigationTab> | ||
| <BottomNavigationTab title="Second" icon="res://ic_view_list" [isSelectable]="false"></BottomNavigationTab> | ||
| <BottomNavigationTab title="Third" icon="res://ic_menu"></BottomNavigationTab> | ||
| </bottomnavigation> | ||
| </GridLayout> | ||
| ``` | ||
|
|
||
| #### Vue | ||
|
|
||
| If you want to use this plugin with Vue, do this in your `app.js` or `main.js`: | ||
|
|
||
| ```javascript | ||
| import bottomnavigation from '@nativescript-community/ui-material-bottomnavigation/vue'; | ||
|
|
||
| Vue.use(bottomnavigation); | ||
| ``` | ||
|
|
||
| This will install and register `bottomnavigation` and `BottomNavigationTab` components to your `Vue` instance and now you can use the plugin as follows: | ||
|
|
||
| ```html | ||
| <GridLayout rows="*, auto"> | ||
| <StackLayout row="0"> | ||
| <label text="content"></label> | ||
| </StackLayout> | ||
| <MDbottomnavigation activeColor="red" inactiveColor="yellow" backgroundColor="black" @tabSelected="onBottomNavigationTabSelected" row="1"> | ||
| <MDBottomNavigationTab title="First" icon="ic_home" /> | ||
| <MDBottomNavigationTab title="Second" icon="ic_view_list" isSelectable="false" /> | ||
| <MDBottomNavigationTab title="Third" icon="ic_menu" /> | ||
| </MDbottomnavigation> | ||
| </GridLayout> | ||
| ``` | ||
|
|
||
| You can find more information of how to use nativescript plugins with Vue [Here!](https://nativescript-vue.org/en/docs/getting-started/nativescript-plugins/) | ||
|
|
||
| #### CSS Styling | ||
|
|
||
| You can also use your css file to set or change the `activeColor` , `inactiveColor` & `backgroundColor` of the Bottom Navigation Bar. | ||
|
|
||
| ```css | ||
| .botom-nav { | ||
| active-color: green; | ||
| inactive-color: black; | ||
| background-color: blue; | ||
| } | ||
| ``` | ||
|
|
||
| ## API | ||
|
|
||
| 1. [bottomnavigation](#bottom-navigation-bar) | ||
| 2. [BottomNavigationTab](#bottom-navigation-tab) | ||
|
|
||
| - **Properties (bindable):** Properties settable through XML/HTML | ||
| - **Properties (internal):** Properties accessible through JS/TS instance | ||
| - **Events:** Event properties settable thew XML/HTML | ||
|
|
||
| # Bottom Navigation Bar | ||
|
|
||
| #### Properties (bindable) | ||
|
|
||
| Properties settable through XML/HTML | ||
|
|
||
| | Property | Required | Default | Type | Description | | ||
| | --------------- | -------- | --------------------------- | ---------------------------- | ------------------------------------------------------- | | ||
| | tabs | true | [] | `Array<BottomNavigationTab>` | Array containing the tabs for the bottomnavigation | | ||
| | titleVisibility | false | `TitleVisibility.Selected` | `TitleVisibility` | Title Visibility for each BottomNavigationTab | | ||
| | activeColor | false | "black" | `String` | Color of the BottomNavigationTab when it's selected | | ||
| | inactiveColor | false | "gray" | `String` | Color of the BottomNavigationTab when it's not selected | | ||
| | backgroundColor | false | "white" | `String` | Color of the BottomNavigation background | | ||
|
|
||
| #### Properties (internal) | ||
|
|
||
| Properties accessible through JS/TS instance | ||
|
|
||
| | Property | Default | Type | Description | | ||
| | ---------------- | --------------------------- | ---------------------------- | ------------------------------------------------------- | | ||
| | items | `[]` | `Array<BottomNavigationTab>` | Array containing the tabs for the bottomnavigation | | ||
| | selectedTabIndex | 0 | `Number` | Index of the selected tab | | ||
| | titleVisibility | `TitleVisibility.Selected` | `TitleVisibility` | Title Visibility for each BottomNavigationTab | | ||
| | activeColor | `new Color('black')` | `Color` | Color of the BottomNavigationTab when it's selected | | ||
| | inactiveColor | `new Color('gray')` | `Color` | Color of the BottomNavigationTab when it's not selected | | ||
| | backgroundColor | `new Color('white')` | `Color` | Color of the BottomNavigation background | | ||
|
|
||
| #### Events | ||
|
|
||
| Event properties settable thew XML/HTML | ||
|
|
||
| | Name | Type | Description | | ||
| | ------------- | -------------------------------------- | ------------------------------------------------------------------------ | | ||
| | tabPressed | `(args: TabPressedEventData): void` | Function fired every time the user tap a tab with `isSelectable: false` | | ||
| | tabSelected | `(args: TabSelectedEventData): void` | Function fired every time the user select a new tab | | ||
| | tabReselected | `(args: TabReselectedEventData): void` | Function fired every time the user select a tab that is already selected | | ||
|
|
||
| #### Methods | ||
|
|
||
| Methods accessible through JS/TS instance | ||
|
|
||
| | Property | Type | Description | | ||
| | ------------------------------------------ | ------ | -------------------------------- | | ||
| | `selectTab(index: number)` | `void` | Select a tab programmatically | | ||
| | `showBadge(index: number, value?: number)` | `void` | Show a badge for an specific tab | | ||
|
|
||
| # Bottom Navigation Tab | ||
|
|
||
| #### Properties (bindable) | ||
|
|
||
| Properties settable through XML/HTML | ||
|
|
||
| | Property | Required | Default | Type | Description | | ||
| | ------------ | -------- | ------- | --------- | ------------------------------------------- | | ||
| | title | true | null | `string` | Title of the tab | | ||
| | icon | true | null | `string` | Icon of the tab | | ||
| | isSelectable | false | true | `boolean` | Determine if the tab can be selected or not | |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Oops, something went wrong.