NativeScript tab icons and Badges

0
votes

I have the following code for my app that I created with NativeScript with Angular 2

<TabView>
    <StackLayout *tabItem="{title: '&#xf015; Profile &#xf1e0;" >
   <Label class="fa" text="&#xf015;"></Label>
<Button class="fa" id="button" text="&#xf1e0; Tap me!" ></Button>
    </StackLayout>
    <StackLayout *tabItem="{title: '&#xf015; Stats">
        <Label text="Second tab item"></Label>
    </StackLayout>

    <StackLayout *tabItem="{title: 'Settings'}">
        <Label text="Third tab item"></Label>
    </StackLayout>
</TabView>

here is am setting the icons for tabTitle as follows

   <StackLayout *tabItem="{title: '&#xf015; Profile &#xf1e0;" >

I am using fontAwesome but the icons set are simple not shown for the tab title. No placeholder for missing icons is shown either.

Icons do show up for labels and buttons.

Also is there a way I can add badges to tabs as shown in the below image

enter image description here

This is helpful when there is an update.

2
angularnativescriptangular2-nativescript

2 Answers

1
votes

Currently, the *tabItem does not support icon fonts because of reasons discussed here. As a workaround, use iconSource which allows you to provide images for your tabs.

<StackLayout *tabItem="{title: 'My Title', iconSource:'res://icon'}">
0
votes

As @Nick has said, tabItem does not support icon fonts at the moment. I also had a trouble like you that I had to implement a tab bar with icons and badges. This is how I did it, and I hope it be useful somehow even though it's not really good practice.

I created a GridLayout inside a DockLayout set property dock="bottom" (fake tabBar). Inside the GridLayout, I made a set of labels whose text can be displayed by icon font. I also add a swipe gesture listener so that users can change tab by swiping. That's the idea that might solve the problem temporarily.