Back Button Translation

Ionic Framework ionic-v3
1

Hello,

on devices there will be a text ‘Back’ next to the back button.
Is it possible to remove the text globally for all pages?

2

According this post Change back button icon you could set the back button text as ' ' (space) to give the feeling that nothing is written

Doc reference: https://ionicframework.com/docs/api/config/Config/ (see backButtonText)

Maybe another solution would be to set a display: none; with css?

3

Well, if you follow the pass of setting ' ' as backButtonText I kind of had the feeling that you would still need a bit of css anyway because in such a case, if I’m not wrong, the arrow gonna be stick to the very left border, which isn’t really handy for the user therefore you would still need a bit of padding. That’s why, maybe just a all css solution like

button.back-button {
    padding: 0 8px;

    &.back-button-ios {
      padding: 0 16px;
    }
    
    span.back-button-text {
       display: none;
    }
}

I’m not against improvements, just a quick css I wrote…

4

ok I prefer to to make the back button text language-dependent.
In my app it is possible to switch between two and more languages and up from now I would change the text

config.set('ios', 'backButtonText', this.translate...);

when the language changed. But I don’t know if this is the proper way?

5

could that work? I would be a bit surprised but that would be cool :wink: Have you try?

6

I did not try it but take a look here

1 Like