CODEWITHSUNDEEP
angularnativescriptangular2-nativescript
Rajan Phatak
Rajan Phatak

Reputation: 524

Programmatically add Label to existing ActionBar

I am developing a sidedrawer component which should add burger menu button dynamically to the action bar which is created by the component. I am able to it successfully using image with the code that i have got

private setActionBarIcon(page: Page) {
    if (isAndroid) {
        page.actionBar.navigationButton = this.getNavigationButton();
    }

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

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;
}

I want to achieve this functionality using a Label instead of image so that i can change the style of menu button/add any other styling that is required.

Can someone guide me on how can i achieve it?

I tried doing it by 

    private getNavigationButton() {
    let navActionItem = new ActionItem();
    //navActionItem.icon = 'res://ic_menu_white';

    const contentView = new ContentView();
    contentView.className = "menu";

    const label = new Label();
    label.className = "mdi icon-menu";
    label.text = String.fromCharCode(0xf1e0);
    contentView.content = label;
    contentView.onLoaded();
    navActionItem._addView(contentView);
    // navActionItem.text = String.fromCharCode(0xe5d2);
    // navActionItem.className = "mdi"
    if (navActionItem.ios) {
        navActionItem.ios.position = 'left';
    }
    navActionItem.on('tap', this.toggleDrawer.bind(this));
    return navActionItem;
}

However i was not able to get the functionality working. Can someone guide me on what's that i am doing wrongly? How do i add a Label control as ActionItem at runtime?

Upvotes: 0

Views: 879

Answers (1)

mrisek
mrisek

Reputation: 659

This is how you add Label to existing ActionBar dynamically. Setting the variable isLabelVisible to true/false will then make your Label appear/disappear.

<ActionBar title="test">
  <StackLayout orientation="horizontal"
    ios:horizontalAlignment="center"
    android:horizontalAlignment="left">
    <Label text="NativeScript" class="action-label" visibility="{{ isLabelVisible ? 'visible' : 'collapse' }}"></Label>
  </StackLayout>
</ActionBar>

I hope this helps. For more info check out the ActionBar documentation: https://docs.nativescript.org/ui/action-bar

As suggested, you can also use Angular way to show it dynamically:

<Label text="NativeScript" class="action-label" *ngIf="isLabelVisible"></Label>

If you just give an id="container" to your StackLayout in ActionBar, you should be able to add Label programatically like this in JS:

const observableModule = require("tns-core-modules/data/observable");
const labelModule = require("tns-core-modules/ui/label");

function showLabelDynamically(args) {
    const page = args.object;
    const container = page.getViewById("container");
    const vm = new observableModule.Observable();

    const myLabel = new labelModule.Label();
    myLabel.text = "The quick brown fox jumps over the lazy dog.";

    // Styling a label via css type
    myLabel.text = "The quick brown fox jumps over the lazy dog.";
    let pageCSS = "label {background-color: #C6C6C6; color: #10C2B0; font-size: 14;} ";

    // set to the page css property the CSS style defined in the pageCSS
    page.css = pageCSS;

    container.addChild(myLabel);
    page.bindingContext = vm;
}
exports.showLabelDynamically = showLabelDynamically;

Upvotes: 3

Related Questions