0

Estoy creando una aplicacion web usando las tabs que vienen por defecto en ionic, pero al momento que quiero utilizarlo de una manera mas parecida android puro usando el swipe, estos no generan ese evento

Segun tengo entendido podria usar ionic-super-tabs, pero lo eh intentado instalar y no logro hacerlo, la version de ionic que estoy usando es 6.0.3, no se si eso es lo que genera el inconveniente, no se si existe otra o alguna forma usando ionic para crear este efecto?

1 respuesta 1

1

Vale justo estaba buscando integrar esa parte en mi proyecto te muestro como lo hice y te comento que estoy utilizando la versión de Ionic 6.20.1 y son las 3 tabs que te genera por defecto:

1.- Instalar SuperTabs: npm i --save @ionic-super-tabs/angular

2.- En el app.module.ts importa el SuperTabsModule Linea 6 y en la 13 no olvides agregar el .forRoot()

introducir la descripción de la imagen aquí

3.- En el tabs.module.ts (src/app/tabs/tabs.module.ts) también se importa el SuperTabsModule

introducir la descripción de la imagen aquí

4.- En ese mismo directorio, vamos a nuestro tabs.page.ts para agregar las configuraciones, de momento las default, más adelante las puedes modificar.

Tu componente tabs.page.ts se vería así:

import { Component, ViewChild } from '@angular/core';
import { SuperTabs } from '@ionic-super-tabs/angular';
import { SuperTabsConfig } from '@ionic-super-tabs/core';
import { Tab1Page } from '../tab1/tab1.page';
import { Tab2Page } from '../tab2/tab2.page';
import { Tab3Page } from '../tab3/tab3.page';

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {

  @ViewChild(SuperTabs) superTabs: SuperTabs;

  tab1Page = Tab1Page;
  tab2Page = Tab2Page;
  tab3page = Tab3Page;

  config: SuperTabsConfig = {
    dragThreshold: 10,
    allowElementScroll: false,
    maxDragAngle: 40,
    sideMenuThreshold: 50,
    transitionDuration: 300,
    shortSwipeDuration: 300,
    debug: false,
    avoidElements: false,
  };
}

En general importas las SuperTabs y su configuración, también importas las tabs ya que cuando hagas el swipe, tiene que saber a que tab dirigirse, finalmente el objeto config de tipo SuperTabsConfig, son las configuraciones por defecto que tiene en su documentacion , puedes probar activando el debug y ver en consola los cambios que se hacen.

5.- Paso final, dentro del mismo directorio, modificaremos nuestro tabs.page.html únicamente es usar los componentes del superTab:

La propiedad activeTabIndex toma el indice del tab con el que quieras que incie la app, en mi caso la primera pestaña entonces el indice es 0.

Puedes cambiar el color del componente <super-tabs-toolbar> usando el atributo color y probar con "primary", "warning", "danger", "default", "dark" quizá haya más fueron los que probé.

Para posicionarlo ya sea en la parte superior o inferior, puedes modificar el "slot" del componente <super-tabs-toolbar slot="bottom"> <super-tabs-toolbar slot="top">

Y en el componente <super-tabs-container> solo configurar nuestra ruta de las paginas, antes definidas en nuestro archivo tabs.page.ts paso 4.

En mi caso mi tabs.page.html quedo de esta manera:

<super-tabs activeTabIndex="0" [config]="config">
  <super-tabs-toolbar slot="bottom" color="default">
    <super-tab-button>
      <ion-icon name="grid-outline"></ion-icon>
      <ion-label>Home</ion-label>
    </super-tab-button>
    <super-tab-button>
      <ion-icon name="hammer-outline"></ion-icon>
      <ion-label>Proyects</ion-label>
    </super-tab-button>
    <super-tab-button>
      <ion-icon name="settings-outline"></ion-icon>
      <ion-label>Settings</ion-label>
    </super-tab-button>
  </super-tabs-toolbar>

  <super-tabs-container autoScrollTop>
    <super-tab>
      <ion-nav [root]="tab1Page"></ion-nav>
    </super-tab>
    <super-tab>
      <ion-nav [root]="tab2Page"></ion-nav>
    </super-tab>
    <super-tab>
  <ion-nav [root]="tab3page"></ion-nav>
</super-tab>

Espero te haya servido deberías tener un resultado similar a este:

https://global.discourse-cdn.com/ionicframework/original/3X/0/6/06dd1f2cc4de9e8a0b0718dd608ad0697d79e93a.gif

Fuentes:

Documentacion

Foro Ionic

Proyecto de ejemplo en Git

1
  • Gracias, ahora me surgio otra pregunta, como puedo hacer que solo se vea en Home page que no se vea entre otros componentes?
    – TD Perez
    Commented el 28 sept. 2022 a las 0:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.