離子2後退按鈕

Question

我要開始一個離子2應用程序，它應該是阿拉伯語的語言，所以我需要使用RTL佈局，我選擇了側菜單模板

配置應用程序到RTL由以下行完全改變了每一件事情的方向，除了後退按鈕應指向正確的方向

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

導航欄現在看起來是這樣

在Ionic團隊關注RTL相關問題之前是否有任何修復？

Answer 1

而是在ion-nav設置dir屬性，你可以使用該平臺的對齊設置爲RTL（docs）

private setProperAligment(): void { 

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

這將dir="rtl"屬性添加到您的應用程序的html標籤。就像你說的，離子的團隊正在與後退按鈕固定的問題，所以在此期間，您可以在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; 
    } 
}