RTL支持

RTL指的是需要“从右到左”展示的语言的UI。 你需要Quasar v0.15.5 +。

启用RTL支持

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

build: {
  rtl: true
}

怎么运行的

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

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

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

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

要记住的事情

将CSS规则标记为例外

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

.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>
    ...
    <link href="https://cdn.jsdelivr.net/npm/quasar-framework@latest/dist/umd/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    ...

    <!--
      we also need an RTL Quasar language pack; let's take Hebrew as example;
      include this after Quasar JS tag
    -->
    <script src="https://cdn.jsdelivr.net/npm/quasar-framework@latest/dist/umd/i18n.he.umd.min.js"></script>
    <script>
      Quasar.i18n.set(Quasar.i18n.he)
    </script>
  </body>
</html>

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

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

国际化 (I18n) 调色板