RTL支持 | Quasar Framework 中文网

RTL支持

RTL指的是需要“从右到左”展示的语言的UI。

启用RTL支持

要启用它，你需要编辑/quasar.conf.js：

build: {
  rtl: true
}

怎么运行的

RTL与Quasar语言包紧密耦合。 当Quasar设置为使用RTL语言（语言包的“rtl”属性设置为“true”）并且启用RTL支持（检查quasar.conf.js的步骤），则用户界面将动态转换Quasar和您的网站/应用程序代码的RTL。

让我们讨论这些要求中的每一个：

需要将Quasar设置为使用RTL语言。请参阅Quasar语言包，了解如何设置语言。您可以将语言设置为默认或动态设置。
需要启用RTL支持。您需要在quasar.conf.js>“build”下将“rtl”设置为“true”。它所做的是为您的网站/应用程序代码和Quasar组件编译CSS，并自动添加相应的RTL CSS规则。由于添加了这些CSS规则，您的CSS包的大小会稍微增加。
可选：启用fromRTL标志。默认情况下，Quasar假设所有样式都是按LTR方向编写的，并为它们生成相应的RTL样式。如果您希望直接在RTL中编写自己的css，那么您需要设置quasar.conf.js > “build” > rtl > "fromRTL"为true。

要记住的事情

RTL和非RTL Quasar语言包可以一起工作并动态切换到RTL。所以只有选择一个RTL Quasar语言包才会触发RTL UI。您不需要单独构建应用程序（一个用于非RTL，一个用于RTL）。 RTL会自动为您动态更改。
您可以通过查看布尔this.$q.lang.rtl来动态检测您是否处于RTL模式。更多信息请参阅Vue原型注入。
编写自己的CSS时需要小心。如上所述，Quasar会根据您的CSS代码自动添加RTL规则。如下所示：

.my-class {
  margin-left: 10px;
  right: 5px;
}

…将为RTL添加此规则:

[dir=rtl] .my-class {
  margin-right: 10px;
  left: 5px;
}

Any CSS rule that refers to “left” or “right” is automatically triggering an equivalent RTL CSS rule to be added.

将CSS规则标记为例外

如果您需要例外，即您的CSS代码不会添加相应的RTL规则，那么添加此注释：

.my-class {
  margin-left: 10px /* rtl:ignore */;
}

…或者，如果您使用Stylus：

.my-class
  margin-left 10px /* rtl:ignore */

…或缩进形式的SCSS：

.my-class
  margin-left: 10px #{"/* rtl:ignore */"}

…或默认的SCSS：

.my-class {
  margin-left: 10px #{"/* rtl:ignore */"};
}

现在，RTL和非RTL用户界面模式都将具有 margin-left 属性。

有时您需要为整个DOM元素/组件制定例外。在这种情况下，将dir="ltr"或 dir="rtl" HTML属性添加到最外面的DOM元素/组件模板中：

<div dir="rtl">
  <!--
    this DIV and all its content will use RTL mode
    regardless of Quasar language pack RTL settings
  -->
</div>

或者，如果您需要RTL UI为DOM元素/组件使用从左到右（ltr）模式：

<div dir="ltr">
  <!--
    this DIV and all its content will use non-RTL mode
    regardless of Quasar language pack RTL settings
  -->
</div>

处理quasar UMD

要在UMD中启用RTL UI，您需要在Quasar版本中包含与RTL等效的CSS标签，并且还要放入Quasar RTL语言包（如希伯来语或波斯语）。例：

<html>
  <head>
    ...
    <!-- Replace "1.0.0" (below) with your Quasar version. -->
    <link href="https://cdn.jsdelivr.net/npm/quasar@1/dist/quasar.rtl.min.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    ...

    <!--
      We also need an RTL Quasar language pack; let's take Hebrew as an example;
      include this after Quasar JS tag;
      Replace "1.0.0" (below) with your Quasar version.
    -->
    <script src="https://cdn.jsdelivr.net/npm/quasar@1/dist/lang/he.umd.min.js"></script>
    <script>
      Quasar.lang.set(Quasar.lang.he)
    </script>
  </body>
</html>

使用我们的[UMD标签生成器]（/start/UMD）确定哪些标记您需要在HTML文件中包含，并确保选中“RTL CSS support”复选框。还要注意生成的html文件开头处的<html dir="rtl">标签 - 您也需要这样做。

警告

Quasar CLI会自动为您的网站/应用程序代码添加等效的RTL CSS规则，但对于不使用Quasar CLI的UMD，情况并非如此。你必须自己管理你的网站/应用程序CSS对应的RTL代码。只有Quasar组件会自动处理。

阅读更多?