-
-
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.
- Loading branch information
1 parent
426f71d
commit a508148
Showing
14 changed files
with
605 additions
and
290 deletions.
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
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
File renamed without changes.
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,216 @@ | ||
| [](https://www.npmjs.com/package/nativescript-material-bottom-navigation) | ||
| [](https://www.npmjs.com/package/nativescript-material-bottom-navigation) | ||
| [](https://github.com/Akylas/nativescript-material-components/network) | ||
| [](https://github.com/Akylas/nativescript-material-components/stargazers) | ||
|
|
||
| ## Installation | ||
|
|
||
| ### Warning :warning: :warning: | ||
| 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) | ||
|
|
||
| * `tns plugin add @nativescript-community/ui-material-bottom-navigation` | ||
|
|
||
| Be sure to run a new build after adding plugins to avoid any issues. | ||
|
|
||
| --- | ||
|
|
||
| ##### [Material Design Spec](https://material.io/design/components/bottom-navigation.html) | ||
|
|
||
| ### Usage | ||
|
|
||
|
|
||
| ## Plain NativeScript | ||
|
|
||
| <span style="color:red">IMPORTANT: </span>_Make sure you include `xmlns:mds="@nativescript-community/ui-material-bottom-navigation"` on the Page element_ | ||
|
|
||
| ### XML | ||
|
|
||
| ```XML | ||
| <Page xmlns:mdt="@nativescript-community/ui-material-bottom-navigation"> | ||
| <mdt:Tabs selectedIndex="1"> | ||
| <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)--> | ||
| <MDTabStrip> | ||
| <MDTabStripItem> | ||
| <Label text="Home"></Label> | ||
| <Image src="font://" class="fas"></Image> | ||
| </TabStripItem> | ||
| <TabStripItem class="special"> | ||
| <Label text="Account"></Label> | ||
| <Image src="font://" class="fas"></Image> | ||
| </TabStripItem> | ||
| <TabStripItem class="special"> | ||
| <Label text="Search"></Label> | ||
| <Image src="font://" class="fas"></Image> | ||
| </TabStripItem> | ||
| </TabStrip> | ||
|
|
||
| <!-- The number of TabContentItem components should corespond to the number of TabStripItem components --> | ||
| <MDTabContentItem> | ||
| <GridLayout> | ||
| <Label text="Home Page" class="h2 text-center"></Label> | ||
| </GridLayout> | ||
| </TabContentItem> | ||
| <MDTabContentItem> | ||
| <GridLayout> | ||
| <Label text="Account Page" class="h2 text-center"></Label> | ||
| </GridLayout> | ||
| </TabContentItem> | ||
| <MDTabContentItem> | ||
| <GridLayout> | ||
| <Label text="Search Page" class="h2 text-center"></Label> | ||
| </GridLayout> | ||
| </TabContentItem> | ||
| </Tabs> | ||
| </Page> | ||
| ``` | ||
|
|
||
| ### CSS | ||
|
|
||
| ```CSS | ||
| MDBottomNavigation.bottom-nav { | ||
| background-color: orangered; | ||
| color: gold; | ||
| font-size: 18; | ||
| } | ||
|
|
||
| TabStripItem.tabstripitem-active { | ||
| background-color: teal; | ||
| } | ||
|
|
||
| TabStripItem.tabstripitem-active:active { | ||
| background-color: yellowgreen; | ||
| } | ||
|
|
||
| TabContentItem.first-tabcontent { | ||
| background-color: seashell; | ||
| color: olive; | ||
| } | ||
| TabContentItem.second-tabcontent { | ||
| background-color: slategray; | ||
| color: aquamarine; | ||
| } | ||
| TabContentItem.third-tabcontent { | ||
| background-color: blueviolet; | ||
| color: antiquewhite; | ||
| } | ||
| MDBottomNavigation TabStrip { | ||
| highlight-color: red; | ||
| } | ||
| ``` | ||
|
|
||
| ## NativeScript + Angular | ||
|
|
||
| ```typescript | ||
| import { NativeScriptMaterialTabsModule } from "@nativescript-community/ui-material-slider/angular"; | ||
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| NativeScriptMaterialTabsModule, | ||
| ... | ||
| ], | ||
| ... | ||
| }) | ||
| ``` | ||
|
|
||
| ```html | ||
| <MDBottomNavigation selectedIndex="1"> | ||
| <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)--> | ||
| <MDTabStrip> | ||
| <MDTabStripItem> | ||
| <Label text="Home"></Label> | ||
| <Image src="font://" class="fas"></Image> | ||
| </TabStripItem> | ||
| <TabStripItem class="special"> | ||
| <Label text="Account"></Label> | ||
| <Image src="font://" class="fas"></Image> | ||
| </TabStripItem> | ||
| <TabStripItem class="special"> | ||
| <Label text="Search"></Label> | ||
| <Image src="font://" class="fas"></Image> | ||
| </TabStripItem> | ||
| </TabStrip> | ||
|
|
||
| <!-- The number of TabContentItem components should corespond to the number of TabStripItem components --> | ||
| <MDTabContentItem> | ||
| <GridLayout> | ||
| <Label text="Home Page" class="h2 text-center"></Label> | ||
| </GridLayout> | ||
| </TabContentItem> | ||
| <MDTabContentItem> | ||
| <GridLayout> | ||
| <Label text="Account Page" class="h2 text-center"></Label> | ||
| </GridLayout> | ||
| </TabContentItem> | ||
| <MDTabContentItem> | ||
| <GridLayout> | ||
| <Label text="Search Page" class="h2 text-center"></Label> | ||
| </GridLayout> | ||
| </TabContentItem> | ||
| </MDBottomNavigation> | ||
| ``` | ||
|
|
||
| ## NativeScript + Vue | ||
|
|
||
| ```javascript | ||
| import BottomNavigation from '@nativescript-community/ui-material-bottom-navigation/vue'; | ||
|
|
||
| Vue.use(BottomNavigation); | ||
| ``` | ||
|
|
||
| ```html | ||
| <MDBottomNavigation selectedIndex="1"> | ||
| <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)--> | ||
| <MDTabStrip> | ||
| <MDTabStripItem> | ||
| <Label text="Home"></Label> | ||
| <Image src="font://" class="fas"></Image> | ||
| </TabStripItem> | ||
| <TabStripItem class="special"> | ||
| <Label text="Account"></Label> | ||
| <Image src="font://" class="fas"></Image> | ||
| </TabStripItem> | ||
| <TabStripItem class="special"> | ||
| <Label text="Search"></Label> | ||
| <Image src="font://" class="fas"></Image> | ||
| </TabStripItem> | ||
| </TabStrip> | ||
|
|
||
| <!-- The number of TabContentItem components should corespond to the number of TabStripItem components --> | ||
| <MDTabContentItem> | ||
| <GridLayout> | ||
| <Label text="Home Page" class="h2 text-center"></Label> | ||
| </GridLayout> | ||
| </TabContentItem> | ||
| <MDTabContentItem> | ||
| <GridLayout> | ||
| <Label text="Account Page" class="h2 text-center"></Label> | ||
| </GridLayout> | ||
| </TabContentItem> | ||
| <MDTabContentItem> | ||
| <GridLayout> | ||
| <Label text="Search Page" class="h2 text-center"></Label> | ||
| </GridLayout> | ||
| </TabContentItem> | ||
| </MDBottomNavigation> | ||
| ``` | ||
|
|
||
| ## Attributes | ||
|
|
||
| | Name |Type| Description| | ||
| | ------------- |:-------------:| -----:| | ||
| | items | Array<MDTabContentItem> | 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| | ||
|
|
||
| ## Events | ||
|
|
||
| |Name | Description| | ||
| | ------------- |:-------------:| -----:| | ||
| |selectedIndexChanged | Emitted when the selectedIndex property is changed. | ||
| |loaded | Emitted when the view is loaded. | ||
| |unloaded | Emitted when the view is unloaded. | ||
| |layoutChanged | Emitted when the layout bounds of a view changes due to layout processing. |
File renamed without changes.
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
File renamed without changes.
File renamed without changes.
Oops, something went wrong.