Search code examples
nativescriptnativescript-angular

Scrollable tabs nativescript


I'm doing an app using nativescript with the new tabs and i need at least 8, but i can not make this tabs scrollable, they appear piled up in the same view like this.

my-tabs

How can i make a scrolltab? I tried adding Scrollview with stack layout but my tabs crashed.

My code:

<Tabs selectedIndex="0" swipeEnabled="true">
  <!-- Tabs -->
  <TabStrip>
    <TabStripItem>
      <Label text="Home"></Label>
    </TabStripItem>
    <TabStripItem class="special">
      <Label text="Account"></Label>
    </TabStripItem>
    <TabStripItem class="special">
      <Label text="Search"></Label>
    </TabStripItem>
    <TabStripItem class="special">
      <Label text="Search"></Label>
    </TabStripItem>
    <TabStripItem class="special">
      <Label text="Search"></Label>
    </TabStripItem>
    <TabStripItem class="special">
      <Label text="Search"></Label>
    </TabStripItem>
  </TabStrip>

  <!-- Contenido tabs -->
  <TabContentItem>
    <GridLayout>
      <Label text="Home Page" class="h2 text-center"></Label>
    </GridLayout>
  </TabContentItem>
  <TabContentItem>
    <GridLayout>
      <Label text="Account Page" class="h2 text-center"></Label>
    </GridLayout>
  </TabContentItem>
  <TabContentItem>
    <GridLayout>
      <Label text="Search Page" class="h2 text-center"></Label>
    </GridLayout>
  </TabContentItem>
  <TabContentItem>
    <GridLayout>
      <Label text="Search Page" class="h2 text-center"></Label>
    </GridLayout>
  </TabContentItem>
  <TabContentItem>
    <GridLayout>
      <Label text="Search Page" class="h2 text-center"></Label>
    </GridLayout>
  </TabContentItem>
  <TabContentItem>
    <GridLayout>
      <Label text="Search Page" class="h2 text-center"></Label>
    </GridLayout>
  </TabContentItem>
</Tabs>


Solution

  • Just resolve it, it only needs to put iOSTabBarItemsAlignment="leading" into Tabs element.