Nativescript - Add ActionBar through Code

Question

Original Question: Just trying to find out if you can add an action bar through code in Nativescript JS And if so, How would you go about it?

New Question: So the following code loads the actionbar dynamically:

var actionB = require("tns-core-modules/ui/action-bar).ActionBar;

var actB = new actionB();
actB.title = "Action Bar";
actB.id = "actionID"

page.content = actB;

Now I just need to know how would I load navigation item and action item for android and ios

Thanks

I haven't tried that personally but should be same in the way your were adding grid and scroll view in stackoverflow.com/questions/52825771/… — Narendra
– Narendra, Commented Oct 18, 2018 at 4:45
Although I have created a shared component for action bar with different htms for android and ios and I use that on top of every other html — Narendra
– Narendra, Commented Oct 18, 2018 at 4:47
That would be perfect. Want I want to fully achieve is add and remove a navigation item, or load one actionbar, and then If I want a different one, load that one. — TheGoldenD0nut
– TheGoldenD0nut, Commented Oct 18, 2018 at 5:16
So got it working dynamically, just need to know how to load navigation items now — TheGoldenD0nut
– TheGoldenD0nut, Commented Oct 18, 2018 at 5:26

Manoj · Accepted Answer · 2018-10-18 04:57:42Z

1

ActionBar is applicable for Page inside a Frame. Use actionBarHidden property of Page to show / hide ActionBar. Use actionItems property of ActionBar to add action items.

answered Oct 18, 2018 at 4:57

Manoj

21.9k3 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Narendra Over a year ago

I think Op's question was how to add actionbar dynamically using code not having that in html :)

TheGoldenD0nut Over a year ago

Yeah, sorry for not being clear. Been going at this program for days. Just want to do something like. page.addChild(Actionbar);

Manoj Over a year ago

No, it doesn't work that way. It's always part of a page and you may decide to hide or show it with that property. Set items / navigation button dynamically if you wany to.

Narendra · Accepted Answer · 2018-10-18 06:22:35Z

1

var actionB = require("tns-core-modules/ui/action-bar).ActionBar;

var actB = new actionB();
actB.title = "Action Bar";
actB.id = "actionID"

var actionItemC = require("tns-core-modules/ui/action-bar).ActionItem;

var actItem = new actionItemC();
actB._addView(actItem)

and if you want to add navigation button

private getNavigationButton() {
    let navActionItem = new ActionItem();
    navActionItem.icon = 'res://ic_menu_white';
    if (navActionItem.ios) {
        navActionItem.ios.position = 'left';
    }
    navActionItem.on('tap', this.toggleDrawer.bind(this));
    return navActionItem;
}

and

if (isAndroid) {
        page.actionBar.navigationButton = this.getNavigationButton();
    }

    if (isIOS) {
        page.actionBar.actionItems.addItem(this.getNavigationButton());
    }

edited Oct 18, 2018 at 6:22

answered Oct 18, 2018 at 5:30

Narendra

4,5842 gold badges24 silver badges40 bronze badges

7 Comments

Narendra Over a year ago

if you want to add NavigationButton than import it from same action bar module. require("tns-core-modules/ui/action-bar).NavigationButton

TheGoldenD0nut Over a year ago

I'm trying to add a NavigationButton: var navB = new navButton(); navB.systemIcon = "ic_menu_btn_add": actionB._addView(navB); But I get nothing

Narendra Over a year ago

When you debug can you see what is the icon asigned to navB?

TheGoldenD0nut Over a year ago

when I console.log(navB.systemIcon); the Result is ic_menu_btn_add Is that what you mean?

Narendra Over a year ago

that is great, do you want to try actionB.content = navB; Or may add all navigationitems to a grid or stacklayout then add.

|

Collectives™ on Stack Overflow

Nativescript - Add ActionBar through Code

2 Answers 2

3 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related