我要启动一个 Ionic 2 应用程序,它应该是阿拉伯语,所以我需要使用 RTL 布局,我选择了侧边菜单模板
通过以下行将应用程序配置为 RTL 完美地改变了一切的方向,除了后退按钮应该指向正确的方向
<ion-nav #content [root]="rootPage" dir="rtl"></ion-nav>
导航栏现在看起来像这样
在 Ionic 团队关注 RTL 相关问题之前,是否有任何修复方法?
最佳答案
您可以使用平台将对齐方式设置为 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;
}
}
关于angular - RTL 布局中的 Ionic 2 后退按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44203777/