RTL支持

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

启用RTL支持

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

build: {
  rtl: true
}

怎么运行的

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

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

  1. 需要将Quasar设置为使用RTL语言。   请参阅Quasar语言包,了解如何设置语言。您可以将语言设置为默认或动态设置。

  2. 需要启用RTL支持。   您需要在quasar.conf.js>“build”下将“rtl”设置为“true”。它所做的是为您的网站/应用程序代码和Quasar组件编译CSS,并自动添加相应的RTL CSS规则。由于添加了这些CSS规则,您的CSS包的大小会稍微增加。

  3. 可选:启用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.0.0/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.0.0/dist/lang/he.umd.min.js"></script>
    <script>
      Quasar.lang.set(Quasar.lang.he)
    </script>
  </body>
</html>

通过用$ quasar create <folder> --kit umd生成一个样本,用“Yes”回答RTL问题并为Quasar语言包指定RTL语言,查看需要包含在HTML文件中的标签。 还要注意生成的html文件开头处的<html dir="rtl">标签 - 您也需要这样做。

警告

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