0

I'm using Nativescript and Angular for an application. In a page, at the middle, I would add two tabs and, below it, the content of them:

<TabView [(ngModel)]="tabSelectedIndex" selectedTabTextColor="#a81b38" tabBackgroundColor="#f5f5f5"
                tabTextFontSize="18" androidSelectedTabHighlightColor="#a81b38"
                (selectedIndexChange)="onSelectedIndexChanged($event)" androidTabsPosition="bottom">
<StackLayout *tabItem="{title: 'Details', iconSource: getIconSource('details')}">
    <Label text="my content 1"></Label>
</StackLayout>

<StackLayout *tabItem="{title: 'Prices', iconSource: getIconSource('prices')}">
    <Label text="my content 2"></Label>
</StackLayout>
</TabView>

So:

--- PAGE START ----
 ...some page content....
 .... tabs ....
 .... content of selected tab ....
 ....other page content...
--- PAGE END ----

The problem is that I can put the TabView just at the top or at the bottom. I tried wrapping the TabView into this:

<StackLayout margin="50 0 0 0">
 ...tabs...
</StackLayout>

and the tabs are positioned correctly but they don't work (they don't change tab and I can't see the tab content). So, is there a way to custom positon the tabs? Thank you!

panagulis72
  • 2,129
  • 6
  • 31
  • 71
  • You mean you like the tabs at the top of TabView, it's by default on Android. On iOS it's not possible. You will have to hide the tab bar and place your own custom tab view, that can update the select index upon tapping them. – Manoj May 15 '19 at 16:42
  • I personally don't use {N} built in TabView but built my own using a GridLayout and some helper functions. This repository was originally created for a different purpose but has a very lightweight version of the custom TabView I made. With a little css (I already put in the classes for it just didn't style it) you could make it look the same as a standard TabView, but you would have to manually manage navigation.https://github.com/geodav-tech/nativescript-vue-memory-leak/blob/master/app/components/App.vue – Shawn Pacarar May 15 '19 at 17:03

0 Answers0