ionic-framework 🚀 - 向右添加左支持

_从@adamdbradley于2015年12月30日17：38_

是的，这是我们要完成的路线图，我们希望从经验丰富的RTL开发人员那里获得更多反馈，以帮助我们指出我们需要改进的地方。您是否能够提供无法与RTL配合使用的ionic2某些部分的清单。我们的目标是提供一个额外的RTL css文件，并根据html元素是否具有dir="rtl"对任何JS进行相应的调整。谢谢

mhartington 于 2016-01-18

👍5

_从@ mashaly100200于2015年12月30日18：39_

很高兴能帮助ionic2团队支持RTL
首先，如果我们使用rtl方向，很容易看到哪些不利影响
我们可以将此attr添加到html标签中，从而将所有网站转换为rtl

要么
我们可以在身体上像这样使用它
style =“ direction：rtl ”

如果离子团队计划支持rtl

thay将需要在App配置中添加目标方向，因为应用程序将需要知道启动时的方向
，并且如果开发人员需要在运行时将应用程序语言更改为rtl语言，则我们应刷新所有应用程序（例如本机android，windows phone app，ios需要重新启动应用程序以更改其方向）

现在，当我尝试更改ionic2 html方向时，我发现有些东西可以支持rtl方向，因为纯HTML konw如何处理rtl方向
但需要支持rtl方向的东西才有
首先是动画
我不知道离子团队是否使用css或javascript代码制作动画，在这两种情况下，所有具有rtl或ltr的动画女巫都需要添加另一个动画方向，不仅要更改varialbe还要添加一个像素，很多事情都需要更改

我想为离子团队提供最大的帮助，以帮助这个图书馆

我知道我的英语不好，但我希望你能理解我的话:)

mhartington 于 2016-01-18

_从@ mashaly100200于2015年12月30日18：44_

请更改此目标“我们的目标是提供一个额外的RTL css文件”
因为我们需要在同一个应用程序中使用两个方向，所以根据用户的选择，有时它会在运行时

mhartington 于 2016-01-18

_从@adamdbradley于2015年12月30日18：51_

我们需要在同一应用程序中使用两个方向，根据用户的选择，有时会在运行时

Ionic本身将能够为您动态添加此CSS文件，具体取决于<html dir="rtl">

mhartington 于 2016-01-18

_从@ mashaly100200于2015年12月30日19：23_

这些img，来自尝试更改onic-conference-app示例的方向
如果离子团队在此示例中涵盖rtl方向，我认为它将不低于rtl支持的90％

Image of Yaktocat

mhartington 于 2016-01-18

_从@ mashaly100200于2015年12月30日19：26_

Image of Yaktocat

mhartington 于 2016-01-18

_从@ mashaly100200于2015年12月30日19：27_

Image of Yaktocat

mhartington 于 2016-01-18

_从@ mashaly100200于2015年12月30日20：21_

向右，向左，向后或向前箭头的任何图标（例如后退按钮图标）都需要这种样式
{
-webkit-transform：旋转（180deg）;
-moz-transform：旋转（180deg）;
-o-transform：旋转（180deg）;
-ms-transform：旋转（180deg）;
变换：rotate（180deg）;
}

mhartington 于 2016-01-18

_从@adamdbradley于2015年12月31日4：27_

因此， @ brandyscarney有一个好主意，我们在存储库中创建所有RTL scss文件，并准备将其填充。

我在考虑，我们可以有一个默认的$rtl-support: false sass变量，而不是动态添加另一个rtl css，可以在每个应用程序的sass变量中进行更新。因此，在大多数情况下，不会将额外的rtl css添加到应用程序中，但是对于那些需要rtl css的用户，可以设置$rtl-support: true 。

然后，在我们新的rtl scss文件中，可以使用<strong i="12">@if</strong> $rtl-support包装css。这样，我们可以使css文件保持分离并易于编辑，并提供开箱即用的rtl支持。认为这可以工作@ mashaly100200吗？

mhartington 于 2016-01-18

_从@ mashaly100200于2015年12月31日11：48_

是的，动态加载rtl是个好主意，

让我们从动画开始，因为可能需要更多的努力

我想知道是否可以在推送和弹出页面时添加特定的页面过渡动画？
以及开发人员如何将此特定动画添加到女巫进入和离开的两个拖曳页面中？
开发人员可以回顾事件，然后将其特定的动画也添加到两个页面中吗？

如果您对前三个问题的回答是“是”，那么我可以祝贺我自己的动画主题，无需任何努力，并且全面支持rtl方向，离子团队非常感谢:)

mhartington 于 2016-01-18

_从@adamdbradley于2016年1月1日1：53_

这是ios的过渡动画： https :

不知道这是否应该为RTL添加逻辑，或者是否应该有一个新的动画。但是，您可以添加自己的过渡，并覆盖pageTransition配置： https :

mhartington 于 2016-01-18

_从@ mashaly100200于2016年1月1日21：55_

嗨@adamdbradley ，圣诞快乐

我完成了一个自定义动画类，该动画类反转了默认的动画类行为，具体取决于documen.dir
https://gist.github.com/mashaly100200/bf713f2b558285322155
我已经测试过了，很快我将在实际项目中测试它（inshaa allah）

我也完成了一些需要撤消的CSS类
https://gist.github.com/mashaly100200/dc23529e570034b0dfb9

如果我面对更多需要逆转的课程，我将其添加到此文件中，直到完成一个或两个真实项目

rtl也需要在应用程序构造函数中进行这些配置
https://gist.github.com/mashaly100200/692160b036422d7b018c

我试图将所有配置添加到一个地方，所以我发现我可以在应用承包商中添加所有内容

希望这些东西可以帮助使ionic2完全支持rtl

请随时添加任何更正或建议。

mhartington 于 2016-01-18

_从@adamdbradley于2016年1月2日3：2_

太酷了，因此看起来RTL过渡非常接近LTR过渡，这使我认为应该将isRTL选项传递给过渡的选项，而我们只有一个过渡。我可以更新ionic，以便它具有可在整个应用程序中引用的公共isRTL属性（对于网络工作者，我们要避免在ionic的逻辑内进行document读取）。

mhartington 于 2016-01-18

_从@adamdbradley于2016年1月2日3：36_

将isRTL()到Platform ： https :

mhartington 于 2016-01-18

_从@adamdbradley于2016年1月2日3：58_

现在所有转换都在opts内传递了isRTL opts ： https :

因此，现在ios转换可以为RTL转换添加逻辑。

mhartington 于 2016-01-18

_从@adamdbradley于2016年1月2日4：38_

添加了我们如何包含RTL css的方法，以便它可以在ionic.css（包括md和ios css）和ionic.ios.css（仅是ios）中正确构建。这种想法是，想要在同一文件中同时包含RTL CSS和LTR CSS的应用程序可以在其sass变量中设置$include-rtl: true ，否则默认情况下将仅包含LTR CSS。 https://github.com/driftyco/ionic2/blob/f38ad4a7d2d8c527a3bc64fd8569b11eb659c290/ionic/components/item/item.ios.scss#L231

mhartington 于 2016-01-18

_从@MatanYed于2016年1月6日18：14_

您只需要知道：iOS中的RTL应用部分是LTR：
主导航栏按钮的左侧是左侧，左侧菜单是左侧，过渡动画是从左到右。

mhartington 于 2016-01-18

_从@adamdbradley于2016年1月7日16：41_

向平台添加了新方法来获取和设置语言和方向： https :

mhartington 于 2016-01-18

_从@ mashaly100200于2016年1月12日21：2_

更新
对于任何人流这个话题
更换
config.set（'backButtonIcon'，'ion-ios-arrow-forward'）;
与
config.set（'backButtonIcon'，'箭头前进'）;

我也更新了动画课
https://gist.github.com/mashaly100200/bf713f2b558285322155

mhartington 于 2016-01-18

我一直在为我们公司的移动应用程序解决此问题，我们需要该应用程序同时支持英语和阿拉伯语，因此将所有内容的方向切换到RTL并不是问题，但需要运行时间。一开始我使用ng-if进行了一些调整，并通过应用程序中的rootscope进行了一些广播，但是每当用户更改语言时，应用程序都需要重新加载，此方法根本无法正常工作。
三天前，我开始与Ionic战斗（这已成为一个普遍的问题:)），穆迪团队目前正在讨论一些问题，但我认为他们不会考虑这些问题。
我没有使用Ionic 2，但是我在此问题上的处理方法非常简单，在ionic指令中具有ionic侧面属性（我认为与RTL问题最相关的指令具有此属性）将使解决方案比看起来容易。
我试图覆盖指令以将绑定添加到side属性，因为现在，它没有使用app.scss中的css并在angular-translate和current的帮助下向其余内容添加一些对齐方式实施穆迪应用程序，每当语言发生变化时，在班级中从左至右更新单词，从左至右更新，反之亦然。
目前，我仍希望它能够正常运行（无论如何它必须正常运行）。

mohessaid 于 2016-02-15

在将dir =“ rtl”添加到index.html之后，元素的渲染将从右开始，这会影响某些元素的外观，例如细分按钮。
解决它，我改变了

  .segment-button:first-of-type {
    border-radius: 4px 0 4px 0;
    margin-left: 0; }
  .segment-button:not(:first-of-type) {
    border-left-width: 0; }
  .segment-button:last-of-type {
    border-left-width: 0;
    border-radius: 4px 0 0 4px;
    margin-left: 0; }

至

  .segment-button:first-of-type {
    border-radius: 0 4px 4px 0;
    margin-right: 0; }
  .segment-button:not(:first-of-type) {
    border-right-width: 0; }
  .segment-button:last-of-type {
    border-right-width: 0;
    border-radius: 4px 0 0 4px;
    margin-right: 0; }

Nav动画必须与应用程序方向相反，对于RTL应用程序，应从左开始，对于LTR应用程序，则应从右开始。为了解决这个问题，我这样做：
变了
var OFF_RIGHT = '99.5%';
至
var OFF_RIGHT = '-99.5%';
和
var OFF_LEFT = '-33%';
至
var OFF_LEFT = '33%';
和

                if (backDirection) {
                    // leaving content, back direction
                    leavingContent
                        .before.clearStyles([OPACITY])
                        .fromTo(TRANSLATEX, CENTER, '100%');
                }

至

                if (backDirection) {
                    // leaving content, back direction
                    leavingContent
                        .before.clearStyles([OPACITY])
                        .fromTo(TRANSLATEX, CENTER, '-100%');
                }

在离子角/过渡/过渡ios

对于导航栏中的back元素，我将图标放在文本之前，然后将图标更改为forward。

@App({
    config: {
        backButtonText: 'الرجوع', // this is arabic or whatever
        backButtonIcon:'ios-arrow-forward'
        //          | ion-ios-arrow-back     | ion-md-arrow-back    
    } // http://ionicframework.com/docs/v2/api/config/Config/
})

可以固定搜索栏输入中的占位符
通过进行这些更改（从左到右更改所有内容）

.searchbar-search-icon {
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2013%2013'><path%20fill='rgba(0,%200,%200,%200.5)'%20d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1%20M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0%20L5,0z'/><line%20stroke='rgba(0,%200,%200,%200.5)'%20stroke-miterlimit='10'%20x1='12.6'%20y1='12.6'%20x2='8.2'%20y2='8.2'/></svg>");
  background-size: 13px;
  background-repeat: no-repeat;
  position: absolute;
  left: 9px;
  top: 9px;
  margin-left: calc(50% - 60px);
  -webkit-transition: all 400ms cubic-bezier(0.25, 0.45, 0.05, 1);
  transition: all 400ms cubic-bezier(0.25, 0.45, 0.05, 1); }

.searchbar-input {
  height: 3rem;
  line-height: 3rem;
  padding: 0 28px;
  font-size: 1.4rem;
  font-weight: 400;
  border-radius: 5px;
  color: #000;
  background-color: #FFFFFF;
  padding-left: calc(50% - 28px);
  -webkit-transition: all 400ms cubic-bezier(0.25, 0.45, 0.05, 1);
  transition: all 400ms cubic-bezier(0.25, 0.45, 0.05, 1); }
  .searchbar-input::-moz-placeholder {
    color: rgba(0, 0, 0, 0.5); }
  .searchbar-input:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.5); }
  .searchbar-input::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.5);
    text-indent: 0; }

至

.searchbar-search-icon {
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2013%2013'><path%20fill='rgba(0,%200,%200,%200.5)'%20d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1%20M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0%20L5,0z'/><line%20stroke='rgba(0,%200,%200,%200.5)'%20stroke-miterlimit='10'%20x1='12.6'%20y1='12.6'%20x2='8.2'%20y2='8.2'/></svg>");
  background-size: 13px;
  background-repeat: no-repeat;
  position: absolute;
  right: 9px;
  top: 9px;
  margin-right: calc(50% - 60px);
  -webkit-transition: all 400ms cubic-bezier(0.25, 0.45, 0.05, 1);
  transition: all 400ms cubic-bezier(0.25, 0.45, 0.05, 1); }

.searchbar-input {
  height: 3rem;
  line-height: 3rem;
  padding: 0 28px;
  font-size: 1.4rem;
  font-weight: 400;
  border-radius: 5px;
  color: #000;
  background-color: #FFFFFF;
  padding-right: calc(50% - 28px);
  -webkit-transition: all 400ms cubic-bezier(0.25, 0.45, 0.05, 1);
  transition: all 400ms cubic-bezier(0.25, 0.45, 0.05, 1); }
  .searchbar-input::-moz-placeholder {
    color: rgba(0, 0, 0, 0.5); }
  .searchbar-input:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.5); }
  .searchbar-input::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.5);
    text-indent: 0; }

wis 于 2016-03-14

在文件中：ionic.bundle.js
更改代码：


setTranslateX: ionic.animationFrameThrottle(function(amount) {
var xTransform = content.offsetX + amount;
$element[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + xTransform + 'px,0,0)';

更改为：


setTranslateX: ionic.animationFrameThrottle(function(amount) {
var xTransform = content.offsetX + amount;
if (content.offsetX > 0)
{
      xTransform = amount;
}
$element[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + xTransform + 'px,0,0)';

我知道这不是很好的解决方案，但我必须这样做。

我添加了这些CSS：


   a , h1 , h2 , span , div{
      text-align: right;
        }

        .title.title-left.header-item{
            left : 0 !important;
        }
label.item,
ion-nav-buttons,
ion-header-bar{
    direction: rtl;
}

.item-checkbox {
    padding-right: 60px;
}


.ion-android-arrow-back:before {
  content: ""; }

.ion-android-arrow-forward:before {
  content: ""; }

并在右侧进行菜单：


<ion-side-menus enable-menu-with-back-views="false" >

    <ion-side-menu side="right" expose-aside-when="large">
        <ion-header-bar class="bar-positive">
            <h1 class="title">Menu</h1>
        </ion-header-bar>
        <ion-content>
            <ion-list>
                <ion-item menu-close ng-click="login()">
                    Login
                </ion-item>


            </ion-list>
        </ion-content>
    </ion-side-menu>


      <ion-side-menu-content>
        <ion-nav-bar class="bar-positive">

            <ion-nav-back-button>
            </ion-nav-back-button>
            <ion-nav-buttons side="right">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="right"></button>
            </ion-nav-buttons>

        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>



</ion-side-menus>

MuhammadRashed 于 2016-03-27

是的，这就是我们正在等待的，那将是很棒的

感谢离子团队

继续：+1：

alaa-alshamy 于 2016-04-16

编辑：没关系，这已经得到解决

sijav 于 2016-05-31

ion-item-sliding必须是rtl版本的swipe-left选项，例如：

        <ion-item-sliding swipe-left>
            <ion-item>
                <ion-avatar item-right>
                    <img src="img/slimer.png">
                </ion-avatar>
                <h2>Slimer</h2>
            </ion-item>
            <ion-item-options>
                <button primary>
                    <ion-icon name="text"></ion-icon>
                    Text
                </button>
                <button secondary>
                    <ion-icon name="call"></ion-icon>
                    Call
                </button>
            </ion-item-options>
        </ion-item-sliding>

hemedani 于 2016-06-01

你好
我正在开发离子2.0。我如何减小左侧导航宽度。

rejeeshrajan10 于 2016-06-21

您如何在v2中使用rtl处理手势？

我需要在ionic v1中为iOS平台修复它。不确定iPhone如何捕获RTL中的向右滑动。

我能够在rtl中更改sidemenu的方向和滑动方向。
https://github.com/msoni11/ionic/releases/tag/v1.1.1-rtl
https://github.com/msoni11/ionic-bower/releases/tag/v1.1.1-rtl

msoni11 于 2016-07-02

当RTL功能将发布时，它将能够在运行该应用程序后对其进行更改（我是说从ltr到rtl之间进行实时更改？
就像在应用程序中更改语言页面的本机应用程序一样。

MatanYadaev 于 2016-07-19

@MatanYed ：是的。它必须实际上。通过使用CSS更改方向和文本对齐，在混合应用程序中这非常简单。

msoni11 于 2016-07-19

@mhartington ：当使用带有RTL方向的浮动离子标签时，在输入字段中键入文本时，浮动标签不会右对齐，而是在中间某处。
有什么解决方案吗？

<ion-list dir="rtl"> <ion-item> <ion-label floating >{{ usrTitle }}</ion-label> <ion-input type="text" [(ngModel)]="usrValue"></ion-input> </ion-item> <ion-item> <ion-label floating >{{ pswTitle }}</ion-label> <ion-input type="password" [(ngModel)]="pswValue"></ion-input> </ion-item></ion-list>

floating

devoraf 于 2016-07-25

+1

royipressburger 于 2016-07-25

👎3

@royipressburger （_regards“ +1” _）-如果您要支持或关注，则有一个“竖起大拇指”图释和“订阅”按钮。

astec 于 2016-07-25

@ mhartington ， @ msoni11 ：有答案吗？我真的很坚持。

devoraf 于 2016-07-27

@devoraf ：我不确定您使用的是哪个版本的ionic。在ionic v1中，我玩过RTL css，form元素对我有用。

msoni11 于 2016-07-27

@ msoni11 ：离子v2。这种特殊的浮动行为对您来说效果很好吗？

devoraf 于 2016-07-27

@devoraf ：我还没有尝试过v2。我的应用程序用v1编写了很多代码，因此我破解了v1以允许RTL。

msoni11 于 2016-07-27

@ msoni11 ：您能否附上可能影响浮动标签对齐方式的示例CSS？

devoraf 于 2016-07-27

+1

RezaHaidari 于 2016-07-29

👎4

@devoraf ：对不起，但我还没有使用浮动标签。我使用了这些表单元素，并使其与RTL正确对齐。

msoni11 于 2016-07-30

我不知道它是否已经声明过，但是当将dir="rtl"添加到<html>标签中时，甚至浏览页面也会变得混乱。在Ionic 2中，我使用的许多组件都不支持它，最终我又切换回Ionic 1。出现白色屏幕或页面不整洁。当我删除dir="rtl"一切正常。

我是在做错什么，还是$state.go()实际上根本不能与rtl一起使用？

loolooii 于 2016-08-03

@loolooii ：您必须添加css才能使ionic 1适用于RTL

.rtl, html[dir=rtl] {
  direction: rtl;
  text-align: right;
}

/** To fix empty page issue in rtl. **/
.rtl .click-block-hide {
  <strong i="7">@include</strong> translate3d(9999px, 0, 0);
}

使用此ionic rtl版本https://github.com/msoni11/ionic/releases/tag/v1.1.1-rtl ，您将可以在RTL中向右滑动。

msoni11 于 2016-08-04

👍2

@ msoni11谢谢！很棒的东西。

loolooii 于 2016-08-04

@loolooii ：:)我也写了一篇小文章，其中提到了实际实现将如何在ionic应用程序中工作。在这里检查

msoni11 于 2016-08-04

关于RTL问题有任何更新吗？

MatanYadaev 于 2016-10-31

👍7 👎1

有关此的任何更新？，还有离子团队为何将其从Beta 12中删除？

OmarHassan25 于 2016-12-05

👍2

我认为，如果我们将开发人员反馈中列出的所有RTL问题列出来，我们可以一一做出贡献并加以解决，最终，我们将获得完整的RTL支持。

Khalid-Nowaf 于 2016-12-21

RTL非常重要！有时间表吗？

AmitMY 于 2017-02-11

@AmitMY不确定ionic2，但对于ionic1，我的实时应用程序之一在RTL支持下运行得很好。

msoni11 于 2017-02-12

@ msoni11谢谢。我说的是Ionic2。

AmitMY 于 2017-02-12

@AmitMY @ msoni11我将很快在一个使用IONIC 2的中型项目中工作，然后我将发现所有RTL问题（如果有）。

Khalid-Nowaf 于 2017-02-12

@ Khalid-Nowaf：我很乐意提供帮助。

msoni11 于 2017-02-12

@ msoni11谢谢！我会及时通知你们的。

Khalid-Nowaf 于 2017-02-12

RTL存在于路线图RC 12中，我不知道他们为什么放弃它？

OmarHassan25 于 2017-02-13

您好，我没有在长螺纹中看到离子滑动？
它也需要支持。
我在这里发布了一个请求
http://idangero.us/swiper/forum/#!/general：support-for-pagination-righ

我的解决方法（尚未编码）是向后填充幻灯片，并在开始时移至最后一张幻灯片。我假设当回放到达第一张幻灯片时，我有正确的事件来检测播放结束：)

请注意，尽管我不是专家。
我希望在组件级别计划RTL支持，而不仅仅是在应用程序级别。

我可能希望我的应用主要使用英语，例如标签/按钮标签，但实际使用的内容是阿拉伯语。例如，由于RTL的文本和图形方向，就像RTL期望或可配置为RTL的行为一样。

index 44

index 45
对！我已经摆脱了那个讨厌的滚动条。

另外，我可能会在一个页面上以不同的语言列出两个列表。

<ion-list flow=RTL>....
<ion-list flow=LTR>....

AlGantori 于 2017-02-14

在rtl模式下，范围与其标签之间没有空白，因此两侧的图标部分不可见。

Mohsen7s 于 2017-02-15

在此过程中，我们还应调查此问题https://github.com/driftyco/ionic/issues/10685

jgw96 于 2017-04-07

大家好，我们正在将RTL支持的跟踪移到此问题中
https://github.com/driftyco/ionic/issues/11211

白兰地将做一些工作来使之继续下去，因此希望很快能看到。

mhartington 于 2017-04-13

这里有很多信息，我没有找到解决办法，因为我不会英语。
有人可以引导我解决菜单方向问题的方法，因为当菜单更改为左时，动画会从左向右打开，并且仍然从左向右滑动。
请任何帮助。

joesleiman 于 2017-05-24

@joesleiman目前没有解决方案。 https://github.com/driftyco/ionic/pull/11336中提出了一个修复建议，有待审核。

AmitMY 于 2017-05-24

@AmitMY好的，谢谢。我还有另一个问题，如何将index.html或ion-app或body中的html标记从rtl更改为方向，因为ion-select不在<ion-nav>下，因此我更改了方向。如果知道的话，您可以引导我解决吗？

joesleiman 于 2017-05-24

@joesleiman ：如果您使用的是ionic1，我已将其固定在此标签下https://github.com/msoni11/ionic/releases/tag/v.1.1.1-rtl.1

您可以查看和应用更改。

msoni11 于 2017-05-24

您可以在HTML标记上设置默认的“目录”，如果要在运行时进行更改，则可以执行“ this.platform.setDit（'rtl'，true）'”。

不要在其他任何地方使用dir属性，因为不支持嵌套方向。

最后，请使用每晚版本，因为它比3.2.1更支持RTL

如果您还有其他支持问题，请使用ionic论坛，有关错误/功能，请使用github

AmitMY 于 2017-05-24

@ msoni11无离子3.2.0

joesleiman 于 2017-05-24

@AmitMY我使用所有我的应用程序在每根标签[att.dir] ='isRtl？ 'rtl'：'ltr''（各种形式：像离子含量）
不好吗？

joesleiman 于 2017-05-24

@joesleiman
目前，我仅使用材料设计页面过渡，这是避免页面从左向右过渡的替代方法。

javascript // in app.module.ts . . imports: [ BrowserModule, IonicModule.forRoot(MyApp, { pageTransition: 'md-transition' // change the page Transition to avoid "LRT" page Transition }) . .

Khalid-Nowaf 于 2017-05-24

@AmitMY我如何将后退按钮图标更改为右箭头而不是左箭头（将其更改为rtl时）

joesleiman 于 2017-05-24

@joesleiman不，在ion-content上有dir="rtl"不能保证得到支持。您应该始终使用this.platform.setDir('rtl', true)并删除所有dir属性，但html标签中的属性除外。它还可以控制打字稿中离子成分（例如手势）的方向。（注意， setDir与true还更新HTML标记与正确的目录）

关于后退按钮，如上所述，如果您使用正确的方法设置方向，它将像下面那样完成您的箭头翻转-https: //github.com/driftyco/ionic/pull/11634。它仅在夜间版本中可用，今天晚些时候将发布一个新版本（3.3.0）。

我再次询问，对于此类支持问题，请使用论坛。 Github适用于错误/功能请求。

您可以在此处阅读有关RTL的更多信息-https: //github.com/AmitMY/ionic-site/blob/543cc0dd6d198edd5aa2a9a31ac5bd4702ef5332/content/docs/rtl-support/index.md
这是官方的RTL文档，但尚未完成，因此不在网站上。

AmitMY 于 2017-05-24

@AmitMY好吧，我会的。。。非常感谢你，

joesleiman 于 2017-05-24

@AmitMy如果用户输入this.platform.setDir（'rtl'，true）; 并关闭应用程序，然后返回到该应用程序，该如何保存html标签dir ='rtl'。所以使用它不是一个好主意。因为它返回到dir =“ ltr”

joesleiman 于 2017-05-24

@joesleiman因此，如果您的应用程序是多方向的，并且您使用用户首选项来决定哪一方，我建议使用NativeStorage ，并为键“ preferences”存储对象： {lang: "he", dir: "rtl"} ，以及然后在app.component.ts的platform.ready检查用户是否有偏好。如果他这样做，则通过setDir应用它们。

目前没有其他解决方案。

AmitMY 于 2017-05-24

我使用setDir时的@AmitMY：仍然是离子选择>>离子警告：在md上的rtl方向上有问题（android）

joesleiman 于 2017-05-24

@AmitMY我通过以下方法解决了这个问题：
html [dir =“ rtl”] .alert-md .alert-radio-icon {
左：0px；
右：13px；
}

joesleiman 于 2017-05-24

我认为您没有使用我建议的夜间版本（ 3.2.1-201705231529 ），如果您正在使用它，这是一种覆盖样式的情况，并且已在此处固定为https://github.com/driftyco / ionic / pull / 11635

AmitMY 于 2017-05-24

@AmitMY您能在这里完成讨论吗，因为我发现了越来越多的错误：
https://forum.ionicframework.com/t/how-can-i-change-the-back-button-in-header-arrow-to-the-right/91591

joesleiman 于 2017-05-24

谢谢你的问题！该问题已被锁定，以防止发表与原始问题无关的评论。如果这仍然是最新版本的Ionic的问题，请创建一个新的问题，并确保模板已完全填写。

ionitron-bot[bot] 于 2018-09-03

Ionic-framework: 向右添加左支持

最有用的评论

所有75条评论

相关问题