Question

我希望使用Angular Material 2创建 RTL 模板但是，我不知道如何做这项工作？请帮助我;

Answer 1

您应该使用rtl作为属性

dir='rtl'

转到index.html，你会发现：

<body >
   <chips-overview-example dir="rtl">Loading Material Docs example...</chips-overview-example>
</body>

Answer 2

您应该将属性dir=rtl添加到<html>标记，因为angular material.js代码使用此document.dir来区分布局方向

Answer 3

如果您想更改网站中所有元素的路线，请在Universal selector文件中使用以下样式（称为styles.css）。

* {
    direction: rtl;
  }

Answer 4

我已经发布了一个库，该库通过使用scss mixins来与材料双向解决方案很好地结合使用：

Answer 5

角型材质的CSS中的某些元素使用选择器[dir=rtl]，例如：

[dir=rtl] .mat-form-field {
   text-align: right;
}

为此，您应该在dir=rtl标签中添加属性html：

<html dir="rtl">