如何将 Angular Material 2 方向更改为 RTL

Question

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

Answer 1

你应该使用 rtl 作为属性

dir='rtl'

这是一个plunker

转到 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

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

* {
    direction: rtl;
  }

Answer 4

我发布了一个与 material bi-direction 解决方案配合良好的库，使用 scss mixins 检查一下：

Answer 5

Angular material 对其 css 中的某些元素使用选择器 [dir=rtl]，例如：

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

因此考虑将 dir=rtl 属性添加到您的 html 标签：

<html dir="rtl">

How To Change Angular Material 2 direction To RTL