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!