This question is locked. New answers and comments are not allowed.
I want to implement a bottom menu bar for both IOS and Android. Can you please guide me which layout should I use, and how to fix my menu at the bottom of the page for both IOS and Android
3 Answers, 1 is accepted
0
Hi,
Thank you for your interest in UI for NativeScript.
For your scenario, you could use RadSideDrawer component and its ability to specify the position of the component.
When you create your SideDrawer with the needed menu content, you could set up its drawerLocation property and set some of the available options: Left, Right, Bottom, Top as it is described in the documentation here.
For example:
For further help, you could also review the sample application here.
Let me know, whether this helps or if I could assist you further.
Regards,
nikolay.tsonev
Telerik by Progress
Thank you for your interest in UI for NativeScript.
For your scenario, you could use RadSideDrawer component and its ability to specify the position of the component.
When you create your SideDrawer with the needed menu content, you could set up its drawerLocation property and set some of the available options: Left, Right, Bottom, Top as it is described in the documentation here.
For example:
<
drawer:RadSideDrawer
id
=
"sideDrawer"
drawerLocation
=
"Bottom"
drawerContentSize
=
"280"
>
<
drawer:RadSideDrawer.drawerTransition
>
<
drawer:RevealTransition
/>
</
drawer:RadSideDrawer.drawerTransition
>
<
drawer:RadSideDrawer.drawerContent
>
<!-- >> (hide) -->
<
StackLayout
cssClass
=
"drawerContent"
>
<
StackLayout
cssClass
=
"headerContent"
>
<
Label
text
=
"Navigation Menu"
/>
</
StackLayout
>
<
ScrollView
>
<
StackLayout
cssClass
=
"drawerMenuContent"
>
<
Label
text
=
"Primary"
cssClass
=
"drawerSectionHeader"
/>
<
Label
text
=
"Social"
cssClass
=
"drawerSectionItem"
/>
<
Label
text
=
"Promotions"
cssClass
=
"drawerSectionItem"
/>
<
Label
text
=
"Labels"
cssClass
=
"drawerSectionHeader"
/>
<
Label
text
=
"Important"
cssClass
=
"drawerSectionItem"
/>
<
Label
text
=
"Starred"
cssClass
=
"drawerSectionItem"
/>
<
Label
text
=
"Sent Mail"
cssClass
=
"drawerSectionItem"
/>
<
Label
text
=
"Drafts"
cssClass
=
"drawerSectionItem"
/>
<
Button
text
=
"Close Drawer"
tap
=
"{{ closeDrawer }}"
/>
</
StackLayout
>
</
ScrollView
>
</
StackLayout
>
</
drawer:RadSideDrawer.drawerContent
>
<
drawer:RadSideDrawer.mainContent
>
<
StackLayout
cssClass
=
"mainContent"
>
</
StackLayout
>
</
drawer:RadSideDrawer.mainContent
>
</
drawer:RadSideDrawer
>
For further help, you could also review the sample application here.
Let me know, whether this helps or if I could assist you further.
Regards,
nikolay.tsonev
Telerik by Progress
Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
0
Rana
Top achievements
Rank 1
answered on 19 Apr 2017, 12:37 PM
Thanks nikolay for replying, but I want to implement both SideDrawer and bottom menu in my app for both android and IOS. I know that default behavior of TabView for IOS converts it into a bottom menu, but I also want this functionality for android. Can you guide me in ths regard ?
0
Hi Rana,
Thank you for writing us back and for the further explanation.
At this time the position of the TabView tabs could not be changed. This is known limitation for this component and we have already logged this as a feature request in our repository here.
Unfortunately, I could not commit to exact time this will be ready. For further info, you could keep track on the issue.
In the meantime, you could use SegmenteBar, which position could be change easily and will work properly for both Android and iOS. For example:
XML
TypeScript
Hope this is applicable for you.
Regards,
nikolay.tsonev
Telerik by Progress
Thank you for writing us back and for the further explanation.
At this time the position of the TabView tabs could not be changed. This is known limitation for this component and we have already logged this as a feature request in our repository here.
Unfortunately, I could not commit to exact time this will be ready. For further info, you could keep track on the issue.
In the meantime, you could use SegmenteBar, which position could be change easily and will work properly for both Android and iOS. For example:
XML
<
Page
xmlns
=
"http://schemas.nativescript.org/tns.xsd"
navigatingTo
=
"navigatingTo"
class
=
"page"
>
<
Page.actionBar
>
<
ActionBar
title
=
"My App"
icon
=
""
class
=
"action-bar"
>
</
ActionBar
>
</
Page.actionBar
>
<
GridLayout
rows
=
"* auto"
columns
=
""
>
<
StackLayout
row
=
"0"
visibility
=
"{{tabshow}}"
>
<
Label
text
=
"First tab"
textWrap
=
"true"
/>
</
StackLayout
>
<
StackLayout
row
=
"0"
visibility
=
"{{tabshow2}}"
>
<
Label
text
=
"Second tab"
textWrap
=
"true"
/>
</
StackLayout
>
<
StackLayout
row
=
"0"
visibility
=
"{{tabshow3}}"
>
<
Label
text
=
"Third tab"
textWrap
=
"true"
/>
</
StackLayout
>
<
SegmentedBar
row
=
"1"
selectedIndexChanged
=
"indexChange"
>
<
SegmentedBar.items
>
<
SegmentedBarItem
title
=
"First"
/>
<
SegmentedBarItem
title
=
"Second"
/>
<
SegmentedBarItem
title
=
"Third"
/>
</
SegmentedBar.items
>
</
SegmentedBar
>
</
GridLayout
>
</
Page
>
TypeScript
import { EventData, Observable } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';
import {SegmentedBar, SelectedIndexChangedEventData} from "ui/segmented-bar"
var flag=1;
var tmpObservable:Observable;
// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
let page = <
Page
>args.object;
tmpObservable= new Observable();
tmpObservable.set("tabshow", "visible");
tmpObservable.set("tabshow2", "collapsed");
tmpObservable.set("tabshow3", "collapsed");
page.bindingContext = tmpObservable;
}
export function indexChange(args:SelectedIndexChangedEventData){
console.log(args.newIndex);
if(flag>1){
switch (args.newIndex) {
case 0:
tmpObservable.set("tabshow", "visible");
tmpObservable.set("tabshow2", "collapsed");
tmpObservable.set("tabshow3", "collapsed");
break;
case 1:
tmpObservable.set("tabshow", "collapsed");
tmpObservable.set("tabshow2", "visible");
tmpObservable.set("tabshow3", "collapsed");
break;
case 2:
tmpObservable.set("tabshow", "collapsed");
tmpObservable.set("tabshow2", "collapsed");
tmpObservable.set("tabshow3", "visible");
break;
default:
break;
}
}
flag++;
}
Regards,
nikolay.tsonev
Telerik by Progress
Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.