我要开始一个Ionic 2应用程序,它应该是阿拉伯语,所以我需要使用RTL布局,我选择了侧面菜单模板
通过以下行将应用程序配置为RTL完全改变了每个方向的方向,除了后退按钮应指向正确的方向
<ion-nav #content [root]="rootPage" dir="rtl"></ion-nav>
导航栏现在看起来像这样
在Ionic团队关注RTL相关问题之前,是不是有任何修复方法?
您可以使用平台将对齐设置为RTL(dir
),而不是在ion-nav
中设置docs属性。
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;
}
}