RTL 布局中的 Ionic 2 后退按钮

Question

我要启动一个 Ionic 2 应用程序，它应该是阿拉伯语，所以我需要使用 RTL 布局，我选择了侧边菜单模板

通过以下行将应用程序配置为 RTL 完美地改变了一切的方向，除了后退按钮应该指向正确的方向

<ion-nav #content [root]="rootPage" dir="rtl"></ion-nav>

导航栏现在看起来像这样

在 Ionic 团队关注 RTL 相关问题之前，是否有任何修复方法？

Answer 1

您可以使用平台将对齐设置为 RTL (docs)

，而不是在 ion-nav 中设置 dir 属性

private setProperAligment(): void {

    if (this.selectedLanguage.rtl) {
        this.platform.setDir('rtl', true);
        // ...
    } else {
        this.platform.setDir('ltr', true);
        // ...
    }
}

这会将 dir="rtl" 属性添加到您应用的 html 标记中。就像你说的，Ionic 团队正在努力解决后退按钮的问题，所以与此同时，你可以在 app.scss 文件中添加这个 css 样式规则：

html[dir="rtl"] {
    .back-button-icon.icon-md.back-button-icon-md.ion-md-arrow-back {
        transform: rotate(180deg);
    }

    .back-button-icon.icon-ios.back-button-icon-ios.ion-ios-arrow-back {
        transform: rotate(180deg);
        padding: 0 5px;
    }
}

Answer 2

在 ionic 5 中我遇到了同样的问题并通过

解决了它

document.dir = 'rtl';

在我遵循文档之前，他们说您必须在 app.component.html 中提及目录，其示例如下

<ion-app [dir]='dir'>

dir 是我的绑定变量，在放置 document.dir = 'rtl' 之后，除后退按钮方向外，该方法的所有功能都运行良好。它也解决了那个问题。现在在我的语言切换器按钮代码中，我只更改 document.dir。

RTL 布局中的 Ionic 2 后退按钮

Ionic 2 back button in RTL layout

typescript

ionic-framework

ionic2

ionic3

angular