How to add items to nativescript actionbar programmatically? -
how programmatically add items actionbar? i've been trying play around code below action items never update.
public setactionbaritems(actionbar: actionbar) { let tab = tabfactory.gettab(this.currenttabindex); let actionitem = new actionitem(); actionitem.set("ios.systemicon", "12"); actionitem.set("ios.position", "right"); actionitem.set("android.systemicon", "ic_menu_search"); actionitem.set("android.position", "right"); actionbar.actionitems.additem(actionitem); // (let actionitem of tab.actionitems) { // actionbar.actionitems.additem(actionitem); // } }
do perhaps need tell view somehow update itself? tried setting actionitems="{{actionbaritems}}"
on actionbar itself, throws warning property read-only.
not proud of right here possible solution. refactor in future.
view model
export class mainviewmodel extends observable { public isarticleslisttabvisible : boolean; public isarchivetabvisible : boolean; public isaccounttabvisible : boolean; public items: array<bottombaritem> = [ new bottombaritem(0, "archive", "ic_archive_black", "#ff303030"), new bottombaritem(1, "my list", "ic_list_black", "#ff303030"), new bottombaritem(2, "account", "ic_account_circle_black", "#ff303030") ]; constructor() { super(); } title() : string { return "my list"; } public setactionbartitle(tab: itab) { this.notifypropertychange("title", tab.title); } public setactionbaritems(currenttab: itab) { if (currenttab instanceof articleslisttab) { this.isarticleslisttabvisible = true; this.isaccounttabvisible = false; this.isarchivetabvisible = false; } else if (currenttab instanceof accounttab) { this.isaccounttabvisible = true; this.isarticleslisttabvisible = false; this.isarchivetabvisible = false; } else { this.isarchivetabvisible = true; this.isarticleslisttabvisible = false; this.isaccounttabvisible = false; } this.notifypropertychange("isarticlestabvisible", this.isarticleslisttabvisible); this.notifypropertychange("isaccounttabvisible", this.isaccounttabvisible); this.notifypropertychange("isarchivetabvisible", this.isarchivetabvisible); } }
xml file
<actionbar title="{{ title }}" class="action-bar" id="mainactionbar"> <actionitem tap="{{onsearch}}" ios.systemicon="12" ios.position="right" android.systemicon="ic_menu_search" android.position="right" visibility="{{isarticleslisttabvisible ? 'visible' : 'collapsed'}}"/> <actionitem tap="{{onarticlesfilter}}" ios.systemicon="10" ios.position="right" android.systemicon="ic_menu_sort_by_size" android.position="popup" text="newest" visibility="{{isarticleslisttabvisible ? 'visible' : 'collapsed'}}"/> <actionitem tap="{{onarticlesfilter}}" ios.systemicon="10" ios.position="right" android.systemicon="ic_menu_sort_by_size" android.position="popup" text="oldest" visibility="{{isarticleslisttabvisible ? 'visible' : 'collapsed'}}"/> <actionitem tap="{{onarticlesfilter}}" ios.systemicon="10" ios.position="right" android.systemicon="ic_menu_sort_by_size" android.position="popup" text="most progress" visibility="{{isarticleslisttabvisible ? 'visible' : 'collapsed'}}"/> <actionitem tap="{{onarticlesfilter}}" ios.systemicon="10" ios.position="right" android.systemicon="ic_menu_sort_by_size" android.position="popup" text="least progress" visibility="{{isarticleslisttabvisible ? 'visible' : 'collapsed'}}"/> </actionbar>
code behind
export function onbottombarloaded(args: eventdata) { this._bottombar = args.object bottombar; this._bottombar.selectitem(1); this._bottombar.on('tabselected', (args) => { switchbottombartab(args.newindex, args.oldindex); let currenttab = tabfactory.gettab(args.newindex); _model.setactionbartitle(currenttab); _model.setactionbaritems(currenttab); }); }
Comments
Post a Comment