RTL支持 | Quasar Framework 中文网

RTL支持

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

启用RTL支持

使用Vite的Quasar CLI

编辑/postcss.config.js文件并取消注释require('postcss-rtlcss')行。
Yarn/npm安装postcss-rtlcss软件包。
如果你已经在运行 "quasar dev "命令，重新启动它。

module.exports = {
  plugins: [
    // https://github.com/postcss/autoprefixer
    require('autoprefixer')(...)

    // https://github.com/elchininet/postcss-rtlcss
    // If you want to support RTL css, then
    // 1. yarn/npm install postcss-rtlcss
    // 2. optionally set quasar.config.js > framework > lang to an RTL language
    // 3. uncomment the following line:
    // require('postcss-rtlcss')
  ]
}

使用Webpack的Quasar CLI

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

build: {
  rtl: true
}

Quasar Vite插件/Vue CLI插件

你首先需要安装postcss-rtlcss包:

$ yarn add -D postcss-rtlcss
# or
$ npm install -D postcss-rtlcss
# or
$ pnpm add quasar -D postcss-rtlcss # experimental support

然后创建/postcss.config.js文件（如果您还没有），把这个添加到里面:

module.exports = {
  plugins: [
    require('postcss-rtlcss')({ /* opts */ }) // <<<< in "plugins"
  ]
}

Quasar UMD

要在UMD中启用RTL UIs，你需要为你的Quasar版本包含RTL等效的CSS标签，同时还要打包Quasar RTL语言包（如希伯来语或波斯语）。例子:

<html>
  <head>
    ...
    <!-- Replace "2.0.0" (below) with your Quasar version. -->
    <link href="https://cdn.jsdelivr.net/npm/quasar@2/dist/quasar.rtl.prod.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 "2.0.0" (below) with your Quasar version.
    -->
    <script src="https://cdn.jsdelivr.net/npm/quasar@2/dist/lang/he.umd.prod.js"></script>
    <script>
      Quasar.lang.set(Quasar.lang.he)
    </script>
  </body>
</html>

通过使用我们的UMD标签生成器检查你需要在你的HTML文件中包含哪些标签，并确保你勾选 "支持RTL CSS "复选框。还要注意生成的HTML文件开头的<html dir="rtl">标签 – 你也需要它。

注意事项

Quasar CLI会自动为您的网站/应用程序的代码添加等效的RTL CSS规则，但对于没有使用Quasar CLI的UMD来说，情况并非如此。您必须自己管理编写相当于网站/应用程序CSS代码的RTL规则。只有Quasar组件才会自动处理这个问题。

怎么运行的

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

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

需要将Quasar设置为使用RTL语言。请参阅Quasar语言包，了解如何设置语言。您可以将语言设置为默认或动态设置。
需要启用RTL支持。请仔细检查上面的 "启用RTL支持 "部分。它所做的是为您的网站/应用程序代码和Quasar组件编译CSS，并自动添加相应的RTL CSS规则。由于添加了这些CSS规则，您的CSS包的大小会稍微增加。
可选：将devland源CSS视为RTL。默认情况下，Quasar假设所有样式都是按LTR方向编写的，并为它们生成相应的RTL样式。如果您希望直接在RTL中编写自己的css，那么您需要:
- (使用Webpack的Quasar CLI) 设置quasar.config.js > “build” > rtl > "fromRTL"为true。
- (使用Vite的Quasar CLI / Quasar Vite插件 / Vue CLI插件) 在/postcss.config.js中设置`require(‘postcss-rtlcss’)({ source: ‘rtl’ })'。

TIP

完整的postcss-rtlcss选项列表。

要记住的事情

RTL和非RTL Quasar语言包可以一起工作并动态切换到RTL。所以只有选择一个RTL Quasar语言包才会触发RTL UI。您不需要单独构建应用程序（一个用于非RTL，一个用于RTL）。 RTL会自动为您动态更改。
您可以通过查看布尔$q.lang.rtl来动态检测您是否处于RTL模式。更多信息请参阅$q对象。
在编写你自己的CSS时，你需要小心。就像上面提到的，如果启用了RTL支持，那么RTL（如果postcss-rtl配置的 "source "设置为 “ltr”，则为LTR）规则将根据你的CSS代码自动添加。所以写：
```
.my-class {
  margin-left: 10px;
  right: 5px;
}
```
…将为RTL添加此规则:
```
[dir=rtl] .my-class {
  margin-right: 10px;
  left: 5px;
}
```
任何引用“left”或“right”的CSS规则都会自动触发要添加的等效RTL CSS规则。

将CSS规则标记为例外

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

.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>