RTL中<ion-select>内的滚动条放置不正确。
演示-https: //gyazo.com/d1602f045193380be6d02432a7e61878

确实是的，但我很难调试它，以了解发生了什么...我将其添加到列表中，然后

@ Newbie012我注意到在AlertController接口和MD中只有这种情况。 你能验证一下吗？

@abennouna是的

感谢@ Newbie012 ，将其添加到alert组件下的列表中

我更新了原始问题，以包含指向一些未解决的RTL问题的链接。 我们既可以将其打开以进行跟踪，也可以关闭它们以在此处跟踪。

@abennouna我注意到从v4的离子幻灯片中删除了dir选项，使用幻灯片组件时应该将其设为RTL。 我是否可以将其添加回来，或者有其他替代方法可以实现？

只要文档位于RTL中， @ twinssbc幻灯片即可以RTL模式工作。 你是在说别的吗？ PS：但是，如果您要动态切换方向，则会出现问题：您必须重新加载文档才能使swiper事件正常运行

@abennouna我要感谢您为确保解决所有RTL问题所做的努力。
Jazakallahu Khairan

我只想提到RTL的ion-item-divider中slot和ltr相比， slot =“ end”具有不同的边距

@ abuassar🤝不要提及！

好决定！ 我看到2px的边距在RTL模式下消失，仅在MD中消失。 你能确认一下吗？

@ abuassar🤝不要提及！

好决定！ 我看到2px的边距在RTL模式下消失，仅在MD中消失。 你能确认一下吗？

这不仅是2px的错误，请检查以下屏幕截图：

START使用slot =“ start”
END使用slot =“ end”
MIDDLE没有插槽

RTL

轻铁

这是如何重现问题
app.component.html：

https://gist.github.com/abuassar/bdee78a37e36cf1c5e7ddc506eed141d

不幸的是，我发现了ion-item的相同问题：

START使用slot =“ start”
END使用slot =“ end”
MIDDLE没有插槽

演示：
app.component.html
https://gist.github.com/abuassar/d957e7b6d5079cd7f30550c91b7c4617

@abuassar，我是否可以假设您不使用PR＃16987的最新主机？ 我更新了问题描述以解释测试上下文。 这是item-divider问题的当前渲染结果： https :

@abennouna，您是对的，我使用rc1，因为我认为它已解决。

您能指导我如何在上述PR中使用最新的Master吗？

@abuassar我在“贡献”部分中使用以下内容更新了问题描述：

如果您不熟悉随附的测试套件，请执行以下操作：

1. 分叉离子回购;
2. 使用rtl分支（或使用master分支并合并PR＃16987）；
3. 设置您的本地副本；
4. 在本地运行测试套件；
5. 当您导航到要测试的组件时，可以将?rtl=true到url中以检查RTL版本。
6. 提交有关该问题的评论。

如果不清楚，请告诉我。

只要文档位于RTL中， @ twinssbc幻灯片即可以RTL模式工作。 你是在说别的吗？ PS：但是，如果您要动态切换方向，则会出现问题：您必须重新加载文档才能使swiper事件正常运行

@abennouna我可以确认幻灯片可以在默认RTL模式下工作，不需要其他选项。

只是添加评论，所以也没有人对此保持警惕。 我开始在这里进行警报： https :

这还将对rtl mixins添加一些更改，以说明作用域选择器。

合并更改以修复警报中的RTL，并发布了新的开发版本： 4.0.0-dev.201901162054.ceae5d2 。

这可能已经修复了RTL中的其他问题。 如果您发现此后发生任何损坏，请告诉我。 谢谢！

我尝试了最新的开发版本：@ ionic / angular：4.0.0-dev.201901162054.ceae5d2

我注意到菜单中的这个奇怪的滚动条：
https://gyazo.com/1d3033c073c854d9e09c89d934ecf50d

要点：
https://gist.github.com/abuassar/2ff18008fa3fcf07d4547d766dd24079

滚动条仅在rtl模式下显示

@abuassar谢谢！ 我认为这类似于警报问题。 🤔我们必须调查一下。

在使用最新的开发版本时，我也注意到在菜单中放置了这个离子切换错误：
https://gyazo.com/b93302e08a9c43f312899736ab26717b

要点：
https://gist.github.com/abuassar/86d90fecdd56e686beef19e2e23c8715

感谢您的辛勤工作！

这次离子段的另一个问题是：
https://gyazo.com/db945c95b20677a6aca96fde0b1cc458

要点：
https://gist.github.com/abuassar/a31a8f823bb7fabd4dcd8cdf581af6a9

此问题仅在RTL和iOS模式下出现，因为'md'在段按钮周围没有边框。

这次离子段的另一个问题是：
https://gyazo.com/db945c95b20677a6aca96fde0b1cc458

要点：
https://gist.github.com/abuassar/a31a8f823bb7fabd4dcd8cdf581af6a9

此问题仅在RTL和iOS模式下出现，因为'md'在段按钮周围没有边框。

@abuassar，这个已经在列表中了，谢谢！

在使用最新的开发版本时，我也注意到在菜单中放置了这个离子切换错误：
https://gyazo.com/b93302e08a9c43f312899736ab26717b

要点：
https://gist.github.com/abuassar/86d90fecdd56e686beef19e2e23c8715

感谢您的辛勤工作！

@abuassar谢谢，这似乎是一种回归，因为它现在也影响离子切换。

@brandyscarney我还没有找到回归源，但是在CSS方面，将right排名规则应用于:host-context([dir=rtl]) .toggle-inner选择器，并且不需要该规则：禁用它可以解决问题 。

@abennouna谢谢！ 很可能是我更改了mixin。 在[dir=rtl]选择器不适用于作用域组件之前，因此在具有现有规则的地方，它们现在正在应用。

这应该是需要更改的代码： https :

这是mixin的工作方式：

• padding() ： https :
• property() ： https :

这是一个示例，其中无论dir如何应用头寸：

.item-options-start {
  <strong i="20">@include</strong> multi-dir() {
    /* stylelint-disable property-blacklist */
    right: auto;
    left: 0;
    /* stylelint-enable property-blacklist */
  }
}

如果有人想为此做公关，请告诉我！ 我会尽力的。 我认为它应该只是修改上面的行（toggle.md-56），确保它可以在LTR和RTL中工作，并在此处将RTL添加到e2e测试中： https :

示例rtl e2e测试： https :

我目前正在处理ionicons ，以将其删除：

❓ arrow icons in iOS: should they be inverted?
❓ arrow icons in MD: should they be inverted?

它涉及将箭头图标[flip-rtl]和[unflip-rtl]样式从此处移动到ionicons：
https://github.com/ionic-team/ionic/blob/master/core/src/components/app/fonts/ionicons.scss#L25 -L34

另外，我们在这里有一些有关贡献和创建请求请求的文档： https :

如果有人有任何疑问，请告诉我，因为我想随时更新此文档！ 谢谢大家的测试和帮助！

@brandyscarney

我还没有找到回归源，但是在CSS方面，将right排名规则应用于:host-context([dir=rtl]) .toggle-inner选择器，并且不需要该规则：禁用它可以解决问题。

编辑：我的诊断错误，抱歉。 不会翻转的是3D变换。 在以下生成的CSS中，RTL选择器不针对.toggle-inner元素，应该被认为是正确的吗？

toggle.md.css

:host([dir=rtl].toggle-checked) .toggle-inner {
  transform: translate3d(calc(-1 * 16px),  0,  0);
}

应该：

:host-context([dir=rtl]):host(.toggle-checked) .toggle-inner {
  transform: translate3d(calc(-1 * 16px),  0,  0);
}

toggle.ios.css

:host([dir=rtl].toggle-checked) .toggle-inner {
  transform: translate3d(calc(-1 * 19px),  0,  0);
}

应该：

:host-context([dir=rtl]):host(.toggle-checked) .toggle-inner {
  transform: translate3d(calc(-1 * 19px),  0,  0);
}

对于iOS，相同的逻辑解决了滑动结束问题：

:host([dir=rtl].toggle-activated.toggle-checked) .toggle-inner {
  right: -4px; }

变成

:host-context([dir=rtl]):host(.toggle-activated.toggle-checked) .toggle-inner {
  right: -4px;
}

@abennouna我同意，我们绝对必须仔细研究一下mixins。 我认为我们需要更详细地研究它才能捕获所有不同的用例。

这是图标PR： https ：

另一个RTL问题，但这一次它不在组件中，而在CSS实用程序中：
float-start和float-end

要点：
https://gist.github.com/abuassar/b85eddb53eaf8a213e855abdea3716f0

屏幕截图：

@abuassar无法在我的示例rc.2应用程序中使用您的模板进行复制。 如果问题仍然存在，请上传完整的仓库🙏

rtl_bug.zip

@abuassar无法在我的示例rc.2应用程序中使用您的模板进行复制。 如果问题仍然存在，请上传完整的仓库🙏

此问题在RC2中不存在，但在最新的开发版本“ 4.0.0-dev.201901162054.ceae5d2”中确实存在
随附的示例演示应用

我更新了PR＃17157已解决的问题，并带有灰色的复选标记：ballot_box_with_check：但我尚未将其标记为已完成。

我还取消了对以前测试过的组件的检查，这些组件最近有回归。

@abuassar ：wave：拉PR＃17157后，您能测试一下吗？ 提前致谢！

@abennouna当然，我将对其进行测试，并在回家ISA时报告
感谢您的努力，非常感谢。

@abuassar pulling拉PR＃17157后，您可以测试一下吗？ 提前致谢！

抱歉，我迟到了，因为我终于设法腾出一些时间来完成此任务。
我将PR应用于RC3，到目前为止，我发现md样式的菜单组件存在2个问题：

1-滚动条错误尚未修复

2-外部阴影混合在开始菜单和结束菜单之间，
即。 开始菜单有结束菜单阴影，而结束菜单有开始菜单阴影

@abuassar谢谢，但公关尚未合并

@abennouna我知道，我将PR与我自己的基于RC3的前叉合并
PS我想在我的测试应用程序中使用此PR，但我不知道如何使用源代码的ionic而不是npm软件包。 欢迎任何提示:)

@abuassar对不起，我误读了您仅使用rc.3

这两个问题都不错！

1-像AlertController rtl滚动条错误一样，我找不到对此的解释。 @brandyscarney可能必须看看

2-固定

至于包括本地构建，我不确定我是否有合适的解决方案，但是我要做的是：

1-在本地拉我想要的东西
2-安装（ npm install && cd core && npm install && cd ../angular && npm install && cd .. ）
3-构建（ npm run build ）
4-在我的应用程序中，我用新文件夹替换了应用程序文件夹（也许npm link可以在这里提供帮助）：

• local-build/core/css -> my-app/node_modules/@ionic/core/css
• local-build/core/dist -> my-app/node_modules/@ionic/core/dist
• local-build/core/loader -> my-app/node_modules/@ionic/core/loader
• local-build/angular/css -> my-app/node_modules/@ionic/angular/css
• local-build/angular/dist -> my-app/node_modules/@ionic/angular/dist

RTL中的Fab图标未水平居中

LTR：

RTL：

@ 3adeling谢谢！ 真奇怪您正在使用哪个版本/版本？

@ 3adeling谢谢！ 真奇怪您正在使用哪个版本/版本？

4.0.0-rc.3

我知道，该错误已由PR＃17157修复

预计何时合并于PR＃17157？
我很惊讶v4最终版没有解决剩余的RTL问题而发布

ion-toggle在4.0.0版本上无法正常工作（演示-https://gyazo.com/a54a336ff3916b42e897713efa3993fb）

解决的办法是将translate3d从16翻转到-16。 但是它会被:host(.toggle-checked) .toggle-inner覆盖

编辑-刚刚看到有一个PR解决此问题。

确实@ Newbie012

还可以请您取消PR并检查所有可以吗？ 输入尽可能多的信息将可能有助于发现任何尾随的问题或回归。

@abennouna另一个与RTL相关的问题是，正如您所知，阿拉伯字母连接在一起，并且_letter-spacing_对阿拉伯单词有不良影响。

不幸的是，md风格的ion-button具有默认的$button-md-letter-spacing: 0.06em; ，该默认值在阿拉伯语单词中会出现小缺口。

如果有任何方法可以禁用此字母间距，那就太好了。

@abuassar是的我在https://github.com/ionic-team/ionic/issues/16633中提出了这一点

但是，我知道状态为“无法解决”。

我当前的解决方法是将其添加到global.scss ：

[dir="rtl"] {
  ion-button {
    letter-spacing: 0;
  }
}

使用Ionic v4.0.0，我无法像在ionic 3中一样使用platform.sitDir('rtl')来将LTR的方向更改为RTL ！

我搜索了很多东西，但没有找到离子文档中的platform.sitDir('rtl')替代品！ 甚至RTL支持说明！

实际上，我使用以下代码document.documentElement.setAttribute('dir', 'rtl')做了一些实验，但是它有很多问题，例如sidemenu位置仍然在左侧而不是右侧！ 正如它应该。

我正在构建一个多语言的应用程序（英语，阿拉伯语），所以这对我来说真是痛苦！

这是一个错误吗？ 我可以找到任何文档吗？

我迁移到Ionic 4，并且遇到RTL问题，我正在使用多语言应用程序。
我可以弄清楚如何根据RTL和LTR更改样式。 变量的动态变化。

我希望会有文档说明如何在全局SCSS中进行设置。

@abuassar是的，我在＃16633中提出了这一点

但是，我知道状态为“无法解决”。

我当前的解决方法是将其添加到global.scss ：

[dir="rtl"] {
  ion-button {
    letter-spacing: 0;
  }
}

###这一定是一个错误！

基于RTL或LTR的Global.SCSS无效！
就我而言，如果我使用RTL，我想使用位于global.scss中的RTL样式，这非常简单。
像离子3。但这对我不起作用。 我迁移到离子4，并陷入这个问题。

[dir="ltr"] {
  ion-button {
    //My style for LTR
  }
}
[dir="rtl"] {
  ion-button {
   //My style for RTL
  }
}

我试图根据我在语言服务变量集中选择的内容来更改方向。 （RTL或LTR）在我的离子标题或离子含量中。
在global.scss中尝试了上面的

全局样式不在乎只看index.html方向，它不在乎我的home.page.html如果我已经设置了动态方向

它总是看着index.html 。 然后从那里取得方向，并使用在那里设置的样式。
（[dir =“ rtl”]）;

还没有解决办法吗？ 我想根据我选择的语言来确定方向，
就我而言，我有2种不同的样式，一种是LTR ，另一种是RTL 。

有什么解决办法吗？

@heshaShawky

实际上，我已经使用以下代码document.documentElement.setAttribute('dir', 'rtl')做了一些实验，但是它有很多问题，例如sidemenu位置仍然在左侧而不是右侧！ 正如它应该。

通过具有rtl值的dir属性来强制执行RTL： https :

如果愿意，也可以将document.documentElement.setAttribute('dir', 'rtl')写document.dir = 'rtl'

至于您提到的问题，已经合并了一些修复程序，但是此问题列出了其余的问题，并提出了解决方案。

请参阅摘要，以及：

• 请帮助我们测试PR＃17157，
• 添加评论与任何剩余的问题（公关后）

@CreativeArtDesign我不确定您要解释什么确切问题。 另外，如果没有与此问题相关联，请为此打开另一个问题。

通过使用具有rtl值的dir属性来强制执行RTL： https :

如果您愿意，也可以将document.documentElement.setAttribute('dir', 'rtl')写document.dir = 'rtl'

至于您提到的问题，已经合并了一些修复程序，但是此问题列出了其余的问题，并提出了解决方案。

请参阅摘要，以及：

• 请帮助我们测试PR＃17157，
• 添加评论与任何剩余的问题（公关后）

对于正式发布，这实际上不是有效的解决方案！ 我尝试了以下代码document.dir = "rtl"或document.documentElement.dir = "rtl";或以上代码，它们都是一样的！ 只是语法不同！！！

使用这种方法会带来很多大问题，例如：

1. 侧面菜单开口的位置仍在左侧（仅文本具有变化的方向）
2. 该应用程序上的所有滑块均无法正常工作！
3. ios版本上的ion-segment看起来不太好，需要一些CSS修复

我不知道该如何处理目前的应用程式？ 使用离子4是一个错误还是什么？ 如果可以，为什么他们要正式发布一个版本？

@heshaShawky我可以看到三种处理当前情况的方法：

1. 您需要等到PR＃17157合并到master中，并在Ionic版本中包含它
2. 您在当地的开发环境中获取PR，测试是否解决了所有问题，并帮助我们在Ionic中获得了良好的RTL支持
3. 您会根据自己的要求覆盖所需的规则。 如果您不知道该怎么办，请通过适当的渠道寻求帮助（论坛/闲暇...）

我可以选择2

1. 您在当地的开发环境中获取PR，测试是否解决了所有问题，并帮助我们在Ionic中获得了良好的RTL支持

但是我对GIT不太熟悉！ 那么，您能否告诉我用于提取PR＃17157并对其进行测试的命令行是什么？

我还注意到，将index.html的dir属性手动更改为RTL根本不会发生任何问题！ 与我的应用程序！

但是，当使用Javasctipt像document.dir='rtl'这样切换目录时，一切都会以错误的方式进行！ 我猜想是因为JS没有更新放置在应用程序初始化上的静态样式！

因此，另一个问题是＃17157可以解决这个问题（动态切换），因为这就是我在说的吗？！

@CreativeArtDesign我不确定您要解释什么确切问题。 另外，如果没有与此问题相关联，请为此打开另一个问题。

我想在global.scss中有一个if案例，它可以感知我的home.page.html中是否有rtl或ltr变量，我的头或内容中是否包含dir =“ {{my variable}}”“; 并取决于我在这里设置的global.css读取的内容是否为rtl或ltr。 并获取该样式表。

我的变量设置为RTL或LTR

在我的home.page.html中，我设置了此变量，具体取决于我在global.scss中使用的CSS设置的变量。希望您现在明白了。 这适用于Ionic 3，但不适用于Ionic 4

<ion-header dir="{{my variable}}">

</ion-header>

我的全球CSS

[dir="ltr"] {
  ion-button {
    // If my tags is LTR use LTR STYLE 
  }
}
[dir="rtl"] {
  ion-button {
    // If my tags is RTL use RTL STYLE 
  }
}

@CreativeArtDesign在ionic 4中已

PS-也许只有我一个人，但感觉就像您要求的不是修复程序。 请注意， @ abennouna正在免费帮助下提供帮助。

@CreativeArtDesign在ionic 4中已

PS-也许只有我一个人，但感觉就像您要求的不是修复程序。 请注意， @ abennouna正在免费帮助下提供帮助。

我什么都没要求，如果离子4不以离子3的方式支持RTL，我在离子3中使用了此功能并迁移到离子4。 那么，为什么要迁移到更好的东西呢？

PS：如果有机会进行测试，我已经准备好测试RTL，我已经使用测试软件已有10年了。 因此，仅将打包好的新就绪代码发送给我，我将为您服务以及其他存在相同问题的人员。

最好的祝福

K A

全部内容*动态开关带有单独的样式表，一个用于LTR ，一个用于RTL *
我的问题只是为了使其易于理解。 如果我切换到动态RTL，我想使用与LTR不同的其他样式表。 这是为了防止设计问题。 因为RTL是其他大小和较高的。 因此需要对其进行样式设置，使其看起来很棒。

如果有更好的方法可以请给我建议。

谢谢。

全部内容*动态开关带有单独的样式表，一个用于LTR ，一个用于RTL *
我的问题只是为了使其易于理解。 如果我切换到动态RTL，我想使用与LTR不同的其他样式表。 这是为了防止设计问题。 因为RTL是其他大小和较高的。 因此需要对其进行样式设置，使其看起来很棒。

如果有更好的方法可以请给我建议。

谢谢。

@CreativeArtDesign我想您可以通过在true时在app.component.ts的if condition上使用platform.isRtl来解决此问题，您的CSS样式表文件为require()

与此概念相同（请阅读评论）
https://github.com/angular/angular-cli/issues/4685

这似乎是一个必须解决的问题。 不仅我有问题。

⁣获取适用于Android的BlueMail

2019年1月31日22：42,22：42，Hesham Shawky [email protected]写道：

全部内容*带有单独样式表的*动态切换
一个用于LTR ，一个用于RTL *
我的问题只是为了使其易于理解。 如果我切换到
RTL动态我想使用其他不同的样式表
从LTR 。 这是为了防止设计问题。 因为RTL是
其他尺寸和高度。 因此需要对其进行样式设置，使其看起来很棒。

如果有更好的方法可以请给我建议。

谢谢。

@CreativeArtDesign我想您可以使用解决此问题
如果为true，则app.component.ts上if condition上的platform.isRtl
require()您的CSS样式表文件

与此概念相同（请阅读评论）
https://github.com/angular/angular-cli/issues/4685

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件或在GitHub上查看：
https://github.com/ionic-team/ionic/issues/17012#issuecomment -459498477

PS：但是，如果您要动态切换方向，则会出现问题：您必须重新加载文档才能使swiper事件正常运行

@abennouna非常感谢您提供此技巧，它已为我修复了几乎所有内容！

只是一个RTL错误，我注意到ion-item-sliding与ion-item-option不能正常工作， ion-item-option一直停留在左侧！

@heshaShawky

只是一个RTL错误，我注意到ion-item-sliding与ion-item-option不能正常工作， ion-item-option一直停留在左侧！

ion-item-sliding错误已在上面的列表中提到

将dir =和您的变量放在content ion标签中还可以修复其余的RTL和页脚。

⁣获取适用于Android的BlueMail

2019年2月1日，1：05,01：05，Hesham Shawky [email protected]写道：

PS：但是，如果您要切换方向，则会出现问题
动态：您必须重新加载文档以保持滑动事件
工作正常

@abennouna非常感谢这个技巧，它几乎修复了所有问题
我！

只是一个RTL错误，我已经注意到离子项目滑动了
ion-item-option无法正常工作，ion-item-option保持不变
在左侧！

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件或在GitHub上查看：
https://github.com/ionic-team/ionic/issues/17012#issuecomment -459540772

PS：但是，如果您要动态切换方向，则会出现问题：您必须重新加载文档才能使swiper事件正常运行

@abennouna非常感谢您提供此技巧，它已为我修复了几乎所有内容！

请注意，这链接到Swiper插件，而不是Ionic本身->
https://github.com/nolimits4web/swiper/issues/2527#issuecomment -373674893

在一个特定的用例中，我选择销毁swiper并按照lib作者的建议重新创建它（而不是重新加载页面）

在一个特定的用例中，我选择销毁swiper并按照lib作者的建议重新创建它（而不是重新加载页面）

@abennouna你能告诉我你是如何做到的吗？ 如果可能的话，我需要使用侧面菜单和离子幻灯片

与其重新加载整个页面，不如说是一种糟糕的用户体验方法！

@heshaShawky不确定它是最好的，使用风险自负:-)

零件

import { ChangeDetectorRef } from '@angular/core';
// ..

export class MyPage {
  public swiperEnabled = true;

  constructor(
    // ...
    private changeDetectorRef: ChangeDetectorRef,
  ) {
    // ..
  }

  someDetectionMethod() {
    // detect direction changed, rebuild the ion-slides
    this.swiperEnabled = false;
    this.changeDetectorRef.detectChanges();
    this.swiperEnabled = true;
    this.changeDetectorRef.detectChanges();
  }
}

模板

<ion-slides *ngIf="swiperEnabled">
  <ion-slide *ngFor="let item of items">
    <!-- slide content -->
  </ion-slide>
</ion-slides>

PS：我不确定侧边菜单的解决方案，我一般不会使用那些:-)

*嗨，离子团队，

我请大家尊重和理解
它将是RTL样式表的解决方案

这就是它在IONIC 3中的工作方式，对我来说非常

在variable.scss中
$app-direction: multi;

在index.html中
<html lang="en" dir="ltr">

在app.scss中

.my-headertext{
  <strong i="24">@include</strong> ltr() { // ENGLISH
    font-family: normal-font;
  }
  <strong i="25">@include</strong> rtl() { // ARABIC
    font-family: arabiclabel-font;
  }
}

根据我的应用偏好中的选择，我的变量更新{{MyRTLVarable}} MyRTLVarable设置为RTL或LTR取决于我选择的内容。

在我的代码HTML中
我将此变量放在内容页眉和页脚中，如下所示：
<HEADER Dir="{{MyRTLVarable}}">

我不喜欢变通办法，我想要一个干净易懂的代码。 并确保新更新的兼容性。
如果这不可能，那么我需要返回IONIC v3。
IONIC TEAM请给我一个答案，以便我决定要做什么。

如果IONIC 4将以正确的方式支持RTL，动态RTL和LTR是我认为需要解决的问题。

如果有什么我可以帮助您的，请告诉我，我准备进行测试，只是为了使RTL处于正确的路径。
您要求这样做：“请帮助我们测试PR＃17157 ...及更高版本？”

最好的祝福

创意艺术设计
卡马尔·S。

@heshaShawky @CreativeArtDesign

为了在本地应用程序中包含尚未合并的修订，并对其进行测试：

1. 从我的叉子与PR克隆
2. 切换到fix-rtl-host-context分支
3. 设置本地副本
4. 建立离子npm run build

或者，作为命令行：

• git clone https://github.com/abennouna/ionic/ ionic-rtl-fixes-fork
• cd ionic-rtl-fixes-fork/
• git checkout fix-rtl-host-context
• npm install && cd core && npm install && cd ../angular && npm install && cd .. && npm run build

然后删除，然后用构建中的文件夹替换应用程序中的以下文件夹：

• local-build/core/css -> your-app/node_modules/@ionic/core/css
• local-build/core/dist -> your-app/node_modules/@ionic/core/dist
• local-build/core/loader -> your-app/node_modules/@ionic/core/loader
• local-build/angular/css -> your-app/node_modules/@ionic/angular/css
• local-build/angular/dist -> your-app/node_modules/@ionic/angular/dist

<ion-list>
<ion-item-sliding>
<ion-item>
<ion-label>Item</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option (click)="unread(item)">Unread</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
ion-item-options在<htmldir="rtl">文档中不可见。
如果我在列表上设置dir =“ ltr”，ion-item-options部分可见

找到了。

应该：

.item-options-start {
正确：0；
左：自动；
-ms-flex-pack：开始；
证明内容：flex-start;
}

.item-options-end {
左：0；
右：自动；
-ms-flex-pack：开始；
证明内容：flex-start;
}

@abennouna似乎您的

有什么方法可以动态设置RTL？

我有一个RTL应用程序，但是我想要一个特定的弹出窗口从左侧进行动画处理（因为该按钮位于左侧），如何实现呢？

@abennouna

你好，
我试图根据您在此处的npm run build ，我遇到了很多错误：

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:24:0
           Definitions of the following identifiers conflict with those in
           another file: describe, fdescribe, xdescribe, it, fit, xit,
           beforeEach, afterEach, beforeAll, afterAll, expect, clock,
           CustomEqualityTester, CustomMatcherFactory, DEFAULT_TIMEOUT_INTERVAL

     L24:  declare var beforeAll: jest.Lifecycle;
     L25:  declare var beforeEach: jest.Lifecycle;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:24:12
           Duplicate identifier 'beforeAll'.

     L24:  declare var beforeAll: jest.Lifecycle;
     L25:  declare var beforeEach: jest.Lifecycle;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:25:12
           Duplicate identifier 'beforeEach'.

     L24:  declare var beforeAll: jest.Lifecycle;
     L25:  declare var beforeEach: jest.Lifecycle;
     L26:  declare var afterAll: jest.Lifecycle;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:26:12
           Duplicate identifier 'afterAll'.

     L25:  declare var beforeEach: jest.Lifecycle;
     L26:  declare var afterAll: jest.Lifecycle;
     L27:  declare var afterEach: jest.Lifecycle;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:27:12
           Duplicate identifier 'afterEach'.

     L26:  declare var afterAll: jest.Lifecycle;
     L27:  declare var afterEach: jest.Lifecycle;
     L28:  declare var describe: jest.Describe;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:31:12
           Duplicate identifier 'it'.

     L30:  declare var xdescribe: jest.Describe;
     L31:  declare var it: jest.It;
     L32:  declare var fit: jest.It;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:32:12
           Duplicate identifier 'fit'.

     L31:  declare var it: jest.It;
     L32:  declare var fit: jest.It;
     L33:  declare var xit: jest.It;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:33:12
           Duplicate identifier 'xit'.

     L32:  declare var fit: jest.It;
     L33:  declare var xit: jest.It;
     L34:  declare var test: jest.It;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:1009:45
           Generic type 'ArrayContaining<T>' requires 1 type argument(s).

   L1008:  function anything(): Any;
   L1009:  function arrayContaining(sample: any[]): ArrayContaining;
   L1010:  function objectContaining(sample: any): ObjectContaining;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:1010:44
           Generic type 'ObjectContaining<T>' requires 1 type argument(s).

   L1009:  function arrayContaining(sample: any[]): ArrayContaining;
   L1010:  function objectContaining(sample: any): ObjectContaining;
   L1011:  function createSpy(name?: string, originalFn?: (...args: any[]) => any): Spy;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:1036:14
           All declarations of 'ArrayContaining' must have identical type
           parameters.

   L1036:      interface ArrayContaining {
   L1037:          new (sample: any[]): any;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:1042:14
           All declarations of 'ObjectContaining' must have identical type
           parameters.

   L1042:      interface ObjectContaining {
   L1043:          new (sample: any): any;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:1170:8
           All declarations of 'message' must have identical modifiers.

   L1169:      pass: boolean;
   L1170:      message: string | (() => string);
   L1171:  }

[ ERROR ]  TypeScript: src/utils/focus-visible.ts:18:42
           Property 'key' does not exist on type 'Event'.

     L17:  doc.addEventListener('keydown', ev => {
     L18:    keyboardMode = FOCUS_KEYS.includes(ev.key);
     L19:    if (!keyboardMode) {

[ ERROR ]  TypeScript: src/utils/overlays.ts:51:13
           Property 'key' does not exist on type 'Event'.

     L50:  doc.addEventListener('keyup', ev => {
     L51:    if (ev.key === 'Escape') {
     L52:      const lastOverlay = getOverlay(doc);

[39:32.9]  build failed in 18.50 s

我假设我在这里做错了。 有人可以指出我正确的方向吗？ 谢谢！

@sndwav不知道在那里会发生什么-您可以再次尝试确保每个步骤都成功吗？

@abennouna我将再次尝试一个新项目以消除任何其他问题，但是请确保：我将回购克隆到现有项目内的文件夹中。 这是正确的方法吗，还是应该将其克隆到一个完全独立的文件夹中？ 谢谢。

（这次我将其克隆到一个单独的文件夹中）

@sndwav如果您在现有项目中进行克隆，我不确定结果如何。 请克隆为一个单独的文件夹。

@abennouna，它正在工作，谢谢！ 我将其克隆为一个单独的文件夹，构建成功。 然后，我复制了文件夹，现在在RTL中，详细信息箭头朝向正确的方向。 稍后再做一些测试，但到目前为止看起来还不错！
感谢您的所有努力。

@sndwav请注意，详细信息箭头已在master中修复：您不需要针对该方面的主机上下文修复。

rtl模式下菜单菜单项的拆分锅边框
.split-pane-side{ border-right: 0 !important; border-left: var(--border) !important; }
菜单切换按钮右侧未显示离子菜单面板
离子浮动不正确
-webkit-transform-origin: right top !important; transform-origin: right top !important;

嗨，您好

在ionic 3中，我们有： platform.setDir
在那里我们可以设置平台的方向。

但是现在离子4不存在。

嗨，您好

在ionic 3中，我们有： platform.setDir
在那里我们可以设置平台的方向。

但是现在离子4不存在。

您可以简单地使用：

document.documentElement.setAttribute('dir', 'rtl');

要么

document.documentElement.setAttribute('dir', 'ltr');

嗨，您好
在ionic 3中，我们有： platform.setDir
在那里我们可以设置平台的方向。
但是现在离子4不存在。

您可以简单地使用：

document.documentElement.setAttribute('dir', 'rtl');

要么

document.documentElement.setAttribute('dir', 'ltr');

工作不正常！ 使用此方法会损坏滑块和导航！ 有没有办法使这些组件刷新以获取正确的RTL样式值

工作不正常！ 使用此方法会损坏滑块和导航！ 有没有办法使这些组件刷新以获取正确的RTL样式值

我尝试过使用新的离子安装滑块，并且工作正常
但是“导航”是什么意思？ 如果您的意思是副菜单也很好用

我的代码：

rtl开关按钮：

  changeLang() {
    if (this.translate.currentLang === 'en') {
      localStorage.setItem('lang', 'ar');
      document.documentElement.setAttribute('dir', 'rtl');
      document.documentElement.setAttribute('lang', 'ar');
      this.translate.use('ar');
    } else {
      localStorage.setItem('lang', 'en');
      document.documentElement.setAttribute('dir', 'ltr');
      document.documentElement.setAttribute('lang', 'en');
      this.translate.use('en');
    }
  }

在app.component.ts构造函数中（在initializeApp（）之后）：

    this.initializeApp();

    if (localStorage.getItem('lang') === 'ar') {
      localStorage.setItem('lang', 'ar');
      document.documentElement.setAttribute('dir', 'rtl');
      document.documentElement.setAttribute('lang', 'ar');
      this.translate.use('ar');
    } else {
      localStorage.setItem('lang', 'en');
      document.documentElement.setAttribute('dir', 'ltr');
      document.documentElement.setAttribute('lang', 'en');
      this.translate.use('en');
    }

注意：我正在使用ngx-translate

工作不正常！ 使用此方法会损坏滑块和导航！ 有没有办法使这些组件刷新以获取正确的RTL样式值

@heshaShawky https://github.com/ionic-team/ionic/issues/17012#issuecomment -459670351

工作不正常！ 使用此方法会损坏滑块和导航！ 有没有办法使这些组件刷新以获取正确的RTL样式值

@heshaShawky ＃17012（评论）

不幸的是，这对滑块非常有用，但对菜单却无效，否则我可能会记错了，因此，如果您有菜单代码，那就太好了！

谢谢你的帮助。

RTL中的浮动输入问题

在离子CLI 4.12.0上测试

嗨，您好，
设置时：

document.documentElement.setAttribute('dir', 'rtl');

有一个问题：离子输入浮动位置
如记录所示：输入用法浮动

当我们添加：

<ion-item>
  <ion-label position="floating">Floating Label</ion-label>
  <ion-input></ion-input>
</ion-item>

在输入焦点上，文本将转换为左侧而不是顶部。

为了解决这个问题，我在global.scss中添加了此类：

.label-floating.sc-ion-label-md-h,
.label-floating.sc-ion-label-ios-h {
    -webkit-transform-origin: right top;
    transform-origin: right top;
}

希望这可以帮助 ！

离子菜单rtl / ltr切换的任何帮助，因为它无法使用[side]='side' ，在用户切换离子切换时，我会改变侧面
我也尝试使用
document.documentElement.setAttribute('dir','rtl');
和
document.documentElement.setAttribute('dir','ltr');
当大多数菜单切换成功时，除离子菜单外

有关完整列表的任何新闻吗？

找到了。

应该：

.item-options-start {
正确：0；
左：自动；
-ms-flex-pack：开始；
证明内容：flex-start;
}

.item-options-end {
左：0；
右：自动；
-ms-flex-pack：开始；
证明内容：flex-start;
}

我对类进行了另一种修改，因为上半部分仅调整了UI视图，但按下的按钮却无法正常工作（因为其中一个item-sliding-option容器占用了100％的覆盖率，而另一个覆盖了另一个）

.item-sliding-active-slide.item-sliding-active-options-end ion-item-options ：not （.item-options-start），
.item-sliding-active-slide.item-sliding-active-options-start .item-options-start {
宽度：自动；
}

您好@abennouna ，我在ion-list的图标有问题，没有ltr这样的边距。
您有任何解决办法的想法吗？

 <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
            <ion-item [routerLink]="p.url">
              <ion-icon slot="start" [src]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>

为什么v4中所有固定的地方都没有更新？

离子菜单rtl / ltr切换的任何帮助，因为它无法使用[side]='side' ，在用户切换离子切换时，我会改变侧面
我也尝试使用
document.documentElement.setAttribute('dir','rtl');
和
document.documentElement.setAttribute('dir','ltr');
当大多数菜单切换成功时，除离子菜单外

有什么帮助吗？

离子菜单rtl / ltr切换的任何帮助，因为它无法使用[side]='side' ，在用户切换离子切换时，我会改变侧面
我也尝试使用
document.documentElement.setAttribute('dir','rtl');
和
document.documentElement.setAttribute('dir','ltr');
当大多数菜单切换成功时，除离子菜单外

有什么帮助吗？

将此添加到您的global.scss文件中：
.label-floating.sc-ion-label-md-h, .label-floating.sc-ion-label-ios-h { -webkit-transform-origin: right top; transform-origin: right top; }

是否有关于滑动式RTL问题的任何更新？

修复！

我已经合并了RTL的以下修复程序，这些修复程序将在明天发布（ 4.4.1 ）：

• 浮动/堆叠标签现在可以正确定位
• 范围插针的底部而不是右侧的箭头像以前一样
• 搜索栏按钮的位置正确
• 标签徽章位置正确（目前仅在Chrome中）
• fab按钮的位置正确
• 切换图标在正确的位置，不会超出范围
• 段边界被翻转，以便在iOS中定位正确的第一个和最后一个按钮

最新开发版本

如果您想尽快尝试，我发布了一个开发版本： 4.5.0-dev.201905212141.24e9cf0

已知错误

我遍历了所有这些列表，发现以下绝对仍然是错误：

• 标签按钮徽章（在Safari中损坏）
• 项目滑动方向
• 项中的按钮（项的末尾位置未设置边距，可能是在填充-水平混合中）
• 日期时间文本与标签不对齐

需要验证

我没有机会检查以下内容：

• 日期时间多列
• 菜单/菜单切换

如果有人可以让我知道我是否错过了某些东西，或者您是否进行了调试，并且可能知道其中的问题出在哪里，那将非常有帮助。 谢谢！

@brandyscarney
向后滑动方向错误，应该反向

这是非常重要的问题，我希望您可以在此版本中对其进行修复：）

@brandyscarney

已知错误

...

• 项中的按钮（项的末尾位置未设置边距，可能是在填充-水平混合中）

仅供参考，我无法在“项目/按钮”测试中复制。

• 日期时间文本与标签不对齐

->公关＃18340

需要验证

我没有机会检查以下内容：

• 日期时间多列

宽度仍断-> PR＃18339

• 菜单/菜单切换

不知道这一点。

太棒了，谢谢@abennouna！ 我合并了您的修复程序。 🙂

我无法重现以下内容：

Float元素：float-start，float-end及其响应版本（回归：＃17012（评论））

| ltr | rtl |
| --- | --- |
| | |

我无法重现以下内容：

Float元素：float-start，float-end及其响应版本（回归：＃17012（评论））

抱歉@brandyscarney你是对的，我想我是从大师那里拿来的之前就测试过

谢谢@ alaa-alshamy！ 我已将其添加到问题中。 由于它仍然需要调查，调试和找到解决方案，因此今天的版本中将没有针对它的修复程序。 🙂

修复！

我已经合并了RTL的以下修复程序，这些修复程序将在明天发布（ 4.4.1 ）：

* **floating/stacked labels** are now positioning properly

* **range** pin has the arrow on the bottom instead of on the right like previously

* **searchbar** buttons are positioning properly

* **tab** badge is positioning properly (in Chrome **only** at the moment)

* **fab** buttons are positioning properly

* **toggle** icon is in correct place and not going out of bounds

* **segment** border is flipped so that it targets the proper first and last buttons in iOS

最新开发版本

如果您想尽快尝试，我发布了一个开发版本： 4.5.0-dev.201905212141.24e9cf0

已知错误

我遍历了所有这些列表，发现以下绝对仍然是错误：

* tab-button badges (broken in Safari)

* item sliding direction

* button in item (slot end in item is broken by the margin-left unset, likely in the padding-horizontal mixin)

* datetime text is not aligning with the label

需要验证

我没有机会检查以下内容：

* datetime multiple columns

* menu / menu-toggle

如果有人可以让我知道我是否错过了某些东西，或者您是否进行了调试，并且可能知道其中的问题出在哪里，那将非常有帮助。 谢谢！

似乎分段边界修复在iOS上不起作用。 我已经更新到@ ionic / angular 4.4.2。

谢谢@loopezz！ 我将其添加到原始问题。

我刚刚提交了一份PR来修复项目的滑动手势/打开方法，网址为： //github.com/ionic-team/ionic/pull/18366

如果有人要测试，我会发布一个开发版本： 4.5.0-dev.201905231504.7ab9479

Ionic 4.4.2问题：
ion-item-sliding在rtl模式下无法正常工作，
当index.htlm方向为dir“ rtl”时
在RTL模式下按钮不会出现。
请让我知道是否有任何解决方法。
谢谢

我无法重现以下内容：

Float元素：float-start，float-end及其响应版本（回归：＃17012（评论））

@brandyscarney我现在可以在Safari中重现。

另外，不确定是否有帮助：接受float-start ，将生成的规则分组，似乎Safari会忽略无法解析的规则：

.ion-float-start,
[float-start] {
  float: left !important;
}
[dir=rtl] .ion-float-start,
:host-context([dir=rtl]) .ion-float-start,
[dir=rtl] [float-start],
:host-context([dir=rtl]) [float-start] {
  float: right !important;
}

（Safari需要非:host-context个）

样式表

实际解析的CSS

谢谢@abennouna！ 您可以为此更新问题吗？ 也许我们需要更新add-root-selector以将它们作为两个单独的选择器返回？

@brandyscarney问题已更新。 在add-root-selector返回2个选择器可以解决此问题。 希望没有零钱😅

@abennouna关于离子项目滑动RTL问题呢？

@shahramSo该修复程序是4.4.2版本的一部分。 您可以共享一个最小的仓库来重现您的问题吗？

抱歉，请参阅下面的白兰地评论👇

@shahramSo项目滑动问题已修复，但尚未发布。 如果一切顺利的话，它将在今天的4.5.0发布中，但是如果您需要它，请立即在这里查看我对开发版本的评论： https :

@brandyscarney有什么方法可以重用ionic 3应用程序中编写的同一SCSS吗？
@include padding（10px，5px，8px，10px）

它抛出一个错误“ No mixin named padding”

该菜单在启动时设置（从右侧打开）。 但是当动态设置/更改它时，它将从左侧打开。 这是一个已知的问题？

参见： https :

是否有关于RTL的任何开发/进展（计划何时将其包含在Ionic4中）？ 还是这个社区推动的努力？

@abennouna

这个问题： https :

仍然在真实的ios设备/模拟器中存在，但在浏览器中不存在！

离子版本：4.7.1

发生这种情况是由于以下样式：

:host( .fab-horizontal-center) {
margin-left: unset;
}

删除未设置将解决问题，但我不确定如何覆盖/取消设置
我尝试了所有其他值作为保证金，但是它们没有用
只删除它可以解决问题！

不知道这是否行得通，我无权对其进行测试，但也许您
可以尝试

：host（.fab-horizo​​ntal-center）：lang（zh）{
左边距：未设置；
}

https://www.w3schools.com/cssref/sel_lang.asp

在2019年8月6日星期二晚上10:37 Adel Ali [email protected]上写道：

发生这种情况是由于以下样式：

：host（.fab-horizo​​ntal-center）{
左边距：未设置；
}

删除未设置将解决问题，但我不确定如何
覆盖/取消
我尝试了所有其他值作为保证金，但是它们没有用
只删除它可以解决问题！

-
您收到此消息是因为您已订阅此线程。
直接回复此电子邮件，在GitHub上查看
https://github.com/ionic-team/ionic/issues/17012吗？
或使线程静音
https://github.com/notifications/unsubscribe-auth/AAHJ3YPFJSDPK4KG7ZKD7BLQDHHIHANCNFSM4GO4IEFQ
。

谢谢@mrahmadt，但是没有用

解决方案是：

在global.scss中

.fab-horizontal-center {
    margin-left: -28px !important;
}

我也注意到在ios模拟器/设备中RTL模式下晶圆厂的开始位置没有改变方向

离子幻灯片rtl无法正常工作？
任何帮助

您好，我在真正的IOS设备中出现侧面菜单问题
它在RTL模式下从左到右打开！
有人可以帮助我解决这个问题吗？

@brandyscarney
关于离子载玻片rtl的任何更新

如果我将document dir更改为RTL，则对离子幻灯片的RTL支持的任何更新离子幻灯片停止在幻灯片之间扫动

如果我将document dir更改为RTL，则对离子幻灯片的RTL支持的任何更新离子幻灯片停止在幻灯片之间扫动

它滑动但方向错误

@abennouna我仍然在当前版本上看到问题“ iOS中的选择图标：固定内部元素的位置”，尽管应该根据问题描述对其进行修复。

@abennouna看起来ion-picker列不会根据LTR vs RTL模式切换位置： https :

先前的工作似乎表明这是故意的：

约会时间
☑️iOS / MD中的选取器：当有2或3个选取器列时，修复开始/结束列的水平位置（PR＃18339）
☑️带有浮动或堆叠标签：日期时间文本应保留在文档流中（回归）（PR＃18340）
iOS iOS / MD中的选择器：使用时间和/或DD / MM / YYYY日期格式时，请按照LTR中的列顺序进行排序（请参阅＃16294）（PR：＃17018）

您还记得这背后的原因吗？

大家好，
我发现RTL（Ionic 5）中离子项目滑动组件存在一些问题：
第一：
ion-item-options不能正确打开，尤其是在iOS中
我用CSS修复了它：
ion-item-options {
宽度：未设置！重要；
}
它解决了该问题，并且该选项在LTR和RTL中均显示正确

第二：
当我尝试以.open（'end'）方法以编程方式打开它时，它在LTR中打开，但在RTL中它激活了名为：item-sliding-active-options-start的类，但一侧是end，所以它没有打开：
要修复它，我添加了带有side =“ start”的第二个ion-item-options，并在打开它并执行我想要的操作后将其删除。 这不是一个好的解决方案，但现在可以解决我的问题。

嘿。 我想知道向后滑动方向是否已经解决。 因为方向现在没有改变。

https://github.com/ionic-team/ionic-framework/issues/19488

<ion-list>详细信息图标使用以下方法在同一页面中更改方向时显示错误的方向（不重新加载）： document.documentElement.setAttribute('dir', 'ltr');

您好，我在真正的IOS设备中出现侧面菜单问题
它在RTL模式下从左到右打开！
有人可以帮助我解决这个问题吗？

这对我也不起作用。

@ChiragPrajapat ，我最近报告了此问题的错误，并显示了有关此操作的
https://github.com/ionic-team/ionic-framework/issues/22116