web-dev-qa-db-fra.com

Comment changer l'étiquette du bouton de retour dans Ionic 2?

Avec le code:

<ion-navbar *navbar>
</ion-navbar>

le bouton de retour est activé. Mais je dois le personnaliser (l'icône ou l'étiquette). Est-ce possible? Vous ne trouvez rien dans docs/api.

javascriptionic-frameworkionic2
17
Christian Benseler

vous pouvez définir le texte du bouton dans votre application.html comme indiqué dans le lien ionique http://ionicframework.com/docs/v2/api/config/Config

@App({
  template: `<ion-nav [root]="root"></ion-nav>`
  config: {
    backButtonText: 'Go Back',
    iconMode: 'ios',
    modalEnter: 'modal-slide-in',
    modalLeave: 'modal-slide-out',
    tabbarPlacement: 'bottom',
    pageTransition: 'ios',
  }
})

UPDATE in ionic 2 beta 8

import {ionicBootstrap} from 'ionic-angular';

ionicBootstrap(AppRoot, customProviders, {
  backButtonText: 'Go Back',
  iconMode: 'ios',
  modalEnter: 'modal-slide-in',
  modalLeave: 'modal-slide-out',
  tabbarPlacement: 'bottom',
  pageTransition: 'ios',
});

UPDATE in ionic 2 rc.0 et supérieur, ainsi que ionic 3

Dans ionic 2 rc.0 et supérieur, nous devons inclure les configs dans app.module.ts sous array importés.

@NgModule({   
 declarations: [
    MyApp,
    Home   
 ],   
 imports: [
    IonicModule.forRoot(MyApp, {
      tabsPlacement: 'top',
      backButtonText: 'Back'
     })],
 bootstrap: [IonicApp],
 entryComponents: [
    MyApp,
    Home   ],
 providers: [MyService]
})
46
AishApp

La version actuelle de IONIC2 vous permet de modifier le texte du bouton Précédent de manière globale.

Vous pouvez également modifier l’icône telle qu’elle apparaît dans ios et masquer l’étiquette "Back".

imports: [
    IonicModule.forRoot(MyApp,{
      backButtonText: '',
      backButtonIcon: 'ios-arrow-back',
      iconMode: 'md'
    })
]

Ajoutez simplement celui-ci à votre app.module.ts.

25
René Preisler

Je n'ai trouvé aucune documentation pour cela non plus. Mais j'ai trouvé le fichier qui définit le texte et la classe du bouton afin que vous puissiez l'éditer ici (cela changera le bouton text/class dans chaque page).

Changer l'attribut backButtonText dans node_modules/ionic-framework/config/modes.js

0
akz92

Ici la documentation officielle https://ionicframework.com/docs/v3/api/config/Config/

il existe un bon exemple d'utilisation dans l'application staric 3 starter

Dans le costructor de app.component.ts, on utilise la méthode "set" utilisée pour l'objet Config d'ionic-angular:

this.config.set('ios', 'backButtonText', values.BACK_BUTTON_TEXT);

Est utile lorsque vous souhaitez utiliser l'internationalisation ou si vous souhaitez modifier les configurations de manière dynamique:

this.translate.get(['BACK_BUTTON_TEXT']).subscribe(values => {
  this.config.set('ios', 'backButtonText', values.BACK_BUTTON_TEXT);
0
raffaeleambrosio

Si vous utilisez ionic 4, vous pouvez redéfinir le texte du bouton comme ceci

<ion-back-button [text]="'<your text>'"></ion-back-button>
0
Kabir