Question

我要开始使用Ionic 2应用程序，它应该是阿拉伯语，所以我需要使用RTL布局，我选择了侧面菜单模板

通过以下行将应用程序配置为RTL完全改变了每个方向的方向，除了后退按钮应指向正确的方向

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

导航栏现在看起来像这样

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

Answer 1

您可以使用平台将对齐设置为RTL（docs）

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

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

在离子5中，我遇到了同样的问题，并通过以下方式解决了问题

document.dir = 'rtl';

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

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

在dir是我的绑定变量的地方，在放置document.dir ='rtl'之后，除后退按钮方向外，其他所有方法都可以正常工作。它也解决了这个问题。现在在我的语言切换器按钮代码中，我仅更改document.dir。

RTL布局中的Ionic 2后退按钮

2 个答案: