Another Vue of NativeScript Webinar is now on YouTube
TabView

This is an overview of the most common usage of TabView. For more information about the available properties, methods, or events, head over to the complete API documentation for TabView.

<TabView> es un componente de navegación que muestra contenido agrupado en pestañas y permite a los usuarios cambiar la pestaña visible.


<TabView :selectedIndex="selectedIndex" @selectedIndexChange="indexChange">
  <TabViewItem title="Tab 1">
    <Label text="Content for Tab 1" />
  </TabViewItem>
  <TabViewItem title="Tab 2">
    <Label text="Content for Tab 2" />
  </TabViewItem>
</TabView>
methods: {
  indexChange: function(args) {
      let newIndex = args.value
      console.log('Current tab index: ' + newIndex)
  }
}

NOTA: Actualmente, el componente TabViewItem espera recibir un solo elemento hijo. En la mayoría de los casos, necesitas envolver tu contenido en un componente contenedor o layout.

Agregando íconos a las pestañas

<TabView :selectedIndex="selectedIndex" iosIconRenderingMode="alwaysOriginal">
  <TabViewItem title="Tab 1" iconSource="~/images/icon.png">
    <Label text="Content for Tab 1" />
  </TabViewItem>
  <TabViewItem title="Tab 2" iconSource="~/images/icon.png">
    <Label text="Content for Tab 2" />
  </TabViewItem>
</TabView>

NOTA: Utiliza imágenes para los íconos en lugar de fuentes.

Propiedades

NombreTipoDescripción
selectedIndexNumberObtiene o establece la pestaña seleccionada.
Valor por defecto: 0.
tabTextColorColor(Propiedad de Estilo) Obtiene o establece el color del texto para los títulos de las pestañas.
tabBackgroundColorColor(Propiedad de Estilo) Obtiene o establece el color de fondo de las pestañas.
selectedTabTextColorColor(Propiedad de Estilo) Obtiene o establece el color del texto de las pestañas.
androidTabsPositionStringObtiene o establece la posición del TabView en Android
Valores válidos: top o bottom.

Eventos

NombreDescripción
selectedIndexChangeEmitido cada vez que un componente <TabViewItem> es presionado.

Componente nativo

AndroidiOS
android.support.v4.view.ViewPagerUITabBarController
Contributors