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。

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

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

  2. 需要启用RTL支持。   请仔细检查上面的 "启用RTL支持 "部分。它所做的是为您的网站/应用程序代码和Quasar组件编译CSS,并自动添加相应的RTL CSS规则。由于添加了这些CSS规则,您的CSS包的大小会稍微增加。

  3. 可选:将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>