CODEWITHSUNDEEP
angularnativescript
Ashhad Ullah
Ashhad Ullah

Reputation: 3

How to Add three action items in action bar 'Nativescript'

I want a menu bar icon at left,one label in center and finally another add icon which will open the modal but I am facing an issue that add icon is placed at left over menu bar icon every time.

I tried android.position, a stacklayout inside but still the same issue

it over writes the left one every time.

Upvotes: 0

Views: 1020

Answers (1)

FrontEnd-er
FrontEnd-er

Reputation: 663

Use this sample code for custom action bar with three action item.

Nativescript code:-

<ActionBar backgroundColor="#007FA3">
    <GridLayout columns="auto,*,auto" orientation="horizontal" ios:padding="0 10" height="100%" width="100%">
        <Image width="25" height="25" src="~/app/icons/left_wht.png" horizontalAlignment="left"
            verticalAlignment="center" class="action-bar-nav" col="0" tintColor="#ffffff">
        </Image>
        <Label text="PageTitle" fontSize="22" color="white" horizontalAlignment="center" verticalAlignment="center"
            col="1"></Label>
        <Image width="25" height="25" src="~/app/icons/shopping-cart.png" verticalAlignment="center" col="2"
            tintColor="#ffffff" marginRight="15"></Image>
    </GridLayout>
</ActionBar>

Image here

Upvotes: 1

Related Questions