Кнопка возврата Ionic 2 в макете RTL

Я собираюсь запустить приложение Ionic 2, и оно должно быть на арабском языке, поэтому мне нужно использовать макет RTL, я выбрал шаблон бокового меню

настройка приложения на RTL с помощью следующей строки полностью изменила направление каждой вещи, за исключением того, что кнопка возврата должна указывать в правильном направлении

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

панель навигации теперь выглядит так

введите здесь описание изображения

Нет ли каких-либо исправлений, пока команда Ionic не обратит внимание на проблемы, связанные с RTL?


typescript ionic-framework angular ionic3 ionic2
person Mohamed Ali    schedule 26.05.2017    source источник

Ответы (2)


arrow_upward
8
arrow_downward

Вместо установки атрибута dir в ion-nav вы можете использовать платформу для установки выравнивания в RTL (документы)

private setProperAligment(): void {

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

Это добавит атрибут dir="rtl" к тегу html вашего приложения. Как вы и сказали, команда Ionic работает над решением проблемы с кнопкой «Назад», поэтому пока вы можете добавить это правило стиля css в файл app.scss:

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;
    }
}
person sebaferreras    schedule 26.05.2017
comment
Рад слышать :) - person sebaferreras; 01.06.2017
comment
в случае [dir = auto]? - person Pradip Vadher; 03.10.2019

arrow_upward
1
arrow_downward

В ionic 5 я столкнулся с той же проблемой и решил ее с помощью

document.dir = 'rtl';

прежде чем я следил за документацией, в которой говорится, что вы должны упомянуть каталог в app.component.html, пример которого приведен ниже

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

Там, где dir была моей привязанной переменной, при таком подходе все работало нормально, кроме направления кнопки «Назад», после размещения document.dir = 'rtl'. Это также решило эту проблему. теперь в моем коде кнопки переключателя языка я меняю только document.dir.

person AbdulBasit    schedule 10.05.2020