¿Cómo colocar pestañas iónicas en la parte inferior de la pantalla?

97

Creé pestañas iónicas simples que muestran mis íconos en la parte superior de la pantalla. Traté de envolverlo en una barra de pie de página iónica para colocarlo en la parte inferior de la pantalla sin éxito. Las pestañas desaparecen cuando hago eso. ¿Cómo debo lograr los looks que quiero?

<ion-footer-bar>
    <ion-tabs class="tabs-icon-only tabs-stable">
    ...
    </ion-tabs>
</ion-footer-bar>
Italo Maia
fuente

Respuestas:

175

Desde la beta 14 de Ionic ( http://blog.ionic.io/the-final-beta/ ), hay algunas variables de configuración que ahora están por defecto en los valores de su plataforma, lo que significa que intentarán comportarse de acuerdo con la plataforma. sobre los que se basan. En el caso de las pestañas, para iOS, el valor predeterminado es mostrar en la parte inferior y Android en la parte superior.

Puede configurar fácilmente la ubicación para todas las plataformas configurando la tabs.positionfunción en el $ionicConfigProvider, dentro de su función de configuración de esta manera:

MyApp.config(['$ionicConfigProvider', function($ionicConfigProvider) {

    $ionicConfigProvider.tabs.position('bottom'); // other values: top

}]);

Puedes consultar la documentación aquí

jrl53
fuente
1
no, no funciona. En las pestañas del navegador están en la parte inferior, en Android - en la parte superior
Kit de herramientas
3
Se supone que las pestañas de @Toolkit Android se representan en la parte superior de forma predeterminada de acuerdo con los documentos de Ionic. Las pautas de Android son evitar el uso de barras inferiores debido a las acciones predeterminadas del sistema operativo ubicadas en la parte inferior: developer.android.com/design/patterns/pure-android.html
Daniel Rochetti
@Toolkit Ya edité la respuesta para corregir la información predeterminada de la plataforma. Si desea personalizarlo, el código anterior es la forma correcta de hacerlo. Sin embargo, le sugiero que evite cambiar los valores predeterminados de la plataforma, tienden a seguir las pautas de la plataforma. =)
Daniel Rochetti
¿Hay alguna forma, usando este método u otro, de tener pestañas inferiores y superiores? Intenté crear otro estado para mi pie de página pero, por alguna razón, no se muestra en la pantalla aunque lo veo en la pestaña de red en mi navegador. Tiene alguna idea sobre esto? Gracias
Bill Pope
65

Para colocar las pestañas ionicFramework en la parte inferior de la pantalla para dispositivos Android, simplemente abra su archivo app.js , y en angular.module agregue las siguientes líneas de código:

.config(function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
})

Espero que esto ayude.

Ahmed Na.
fuente
¿Cómo lograr pestañas en la parte superior e inferior de la pantalla?
Syed Danish Ali
Creo que podrías crear una plantilla separada para pestañas en la parte inferior y superior
Ahmed Na.
Oh si. Lo entiendo. Soy un novato en este mundo iónico.
Syed Danish Ali
Esto debe marcarse como respuesta. Es simple y directo al grano, tienes mi voto a favor ...
Mbithy Mbithy
Si bien configura la pestaña de Android en la parte inferior, funciona bien según su código, pero mientras presiona el teclado, la pestaña también aparece con la pestaña. ¿Hay alguna opción para establecerlo estable en la parte inferior mientras presiona el teclado?
Suthan M
9

Actualización para Ionic 2 (sintaxis más limpia / mejorada):

En app.js:

@App({
  ...
  config: {
    tabbarPlacement: 'bottom',
  }
})

Ver configuraciones

Greg Blass
fuente
7

Colocarlo en su app.js hace el trabajo.

.config(function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
})

Ionic toma en cuenta automáticamente las configuraciones de la plataforma para ajustar cosas como qué estilo de transición usar y si los íconos de pestañas deben mostrarse en la parte superior o inferior.

Por ejemplo, en el caso de las pestañas, para iOS el valor predeterminado es mostrar en la parte inferior y Android en la parte superior.

Note1 : Debe tenerse en cuenta que cuando una plataforma no es iOS o Android, entonces estará predeterminada a iOS

Nota 2 : si está desarrollando en un navegador de escritorio, adoptará las configuraciones predeterminadas de iOS

Raj Kumar
fuente
5

Al lado del archivo app.js, deberá inyectar el $ ionicConfigProvider al módulo .config y agregar $ ionicConfigProvider.tabs.position ('bottom')

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {

 $ionicConfigProvider.tabs.position('bottom'); //top

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })
.
.
.
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});
Sandip Moradiya
fuente
3

Cómo colocar pestañas iónicas en la parte inferior de la pantalla en Ionic 2

Para la versión actual ionic 2.0.0-beta.10.

En app.ts:

ionicBootstrap(MyApp, [], {
  tabbarPlacement: "bottom"
});

Ver configuración

Para el próximo lanzamiento iónico 2.0.0-beta.11

En app.ts:

ionicBootstrap(MyApp, [], {
  tabsPlacement: "bottom" 
});

Config

MasterProgrammer200
fuente
2

Actualización para Ionic 2 y Ionic 3+:

Tiene 2 métodos para cambiar la posición de la barra de pestañas:

Método 1: Utilice las tabsPlacementpropiedades de<ion-tabs>

<ion-tabs  tabsPlacement='bottom' >
    <ion-tab [root]="rootTab" tabTitle="Home"></ion-tab> 
</ion-tabs>

Método 2: cambiar la configuración en app.module.ts

@NgModule({
  imports: [
    IonicModule.forRoot(MyApp, {
      tabsPlacement : 'bottom'
    })
  ]
})

Ver los documentos

Duannx
fuente
¿Hay algo remotamente similar para el componente Segmento? Puedo ponerlo en la parte inferior con CSS sin preocupaciones, pero al poner el borde en los botones en la parte superior, hay tantos bucles para saltar y se siente bastante hack, así que me pregunto si hubo una solución más fácil, pero no encontré ninguna. en los docs. En realidad, el documento del segmento es bastante corto ... ionicframework.com/docs/api/components/segment/Segment
yogibimbi
Responderme a ion-segment-button.segment-button { border-top-style: solid; border-bottom-width: 0; }mí mismo: funciona el truco, sin embargo, para el ancho superior del borde no encontré ningún otro recurso que establecerlo explícitamente en el atributo de estilo del elemento en 2px. Algo más siempre lo sobrescribe con 3px, incluso configurándolo en Chrome en el elemento y con! Important en la hoja de estilo no parece superar eso.
yogibimbi
1
myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);
Nasouh Almrstani
fuente
Por favor, evite las respuestas de solo código y explique su solución.
Micho