RTL 是指支持语言从右到左的 UI 排版。
开启 RTL 支持
Quasar CLI with Vite
- 编辑
/postcss.config.js文件并取消注释import rtlcss from 'postcss-rtlcss'行。 - Yarn/npm/pnpm/bun 安装
postcss-rtlcss包。 - 如果您已经运行了 “quasar dev” 命令，请重新启动它。
import autoprefixer from "autoprefixer";
import rtlcss from "postcss-rtlcss";
export default {
plugins: [
// https://github.com/postcss/autoprefixer
autoprefixer({
overrideBrowserslist: [
"last 4 Chrome versions",
"last 4 Firefox versions",
"last 4 Edge versions",
"last 4 Safari versions",
"last 4 Android versions",
"last 4 ChromeAndroid versions",
"last 4 FirefoxAndroid versions",
"last 4 iOS versions",
],
}),
// https://github.com/elchininet/postcss-rtlcss
// If you want to support RTL css, then
// 1. yarn/pnpm/bun/npm install postcss-rtlcss
// 2. optionally set quasar.config.js > framework > lang to an RTL language
// 3. uncomment the following line (and its import statement above):
rtlcss(),
],
};Quasar CLI with Webpack
编辑 /quasar.config 文件来开启 RTL 支持：
build: {
rtl: true;
}Vite Plugin
首先需要安装 postcss-rtlcss 包：
$ yarn add --dev postcss-rtlcss然后创建 /postcss.config.js 文件（如果还没有的话），并加入以下内容：
import rtlcss from "postcss-rtlcss";
export default {
plugins: [
rtlcss({
/* opts */
}), // <<<< in "plugins"
],
};Quasar UMD
在 UMD 中开启 RTL，需要引入对应您 Quasar 版本的 RTL CSS 标签，并加载一个 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 support” 复选框。 还要注意生成的 html 文件开头的 <html dir="rtl"> 标签 – 这个也是必需的。
注意
Quasar CLI 会自动为您的网站/应用代码添加对应的 RTL CSS 规则，但在 UMD 中则不行（因为不使用 Quasar CLI）。您需要自行编写网站/应用 CSS 代码的 RTL 版本。只有 Quasar 组件会自动处理 RTL。
工作原理
RTL 与 Quasar 语言包 紧密耦合。当 Quasar 被设置为使用 RTL 语言时（语言包的 “rtl” 属性被设置为 “true”）并且 RTL 支持已启用（检查上面的"开启 RTL 支持"部分），UI 将动态转换 Quasar 和您的网站/应用代码以适应 RTL。
让我们讨论一下这些要求：
Quasar 需要被设置为使用 RTL 语言。 参阅 Quasar 语言包 了解如何设置语言。您可以设置默认语言或动态切换语言。
需要启用 RTL 支持。 请仔细检查上面的"开启 RTL 支持"部分。启用后，它会同时为您的网站/应用代码和 Quasar 组件编译 CSS，并自动添加对应的 RTL CSS 规则。由于添加了这些 CSS 规则，您的 CSS 包体积会略有增加。
可选: 将开发者的源 CSS 视为 RTL。 默认情况下，Quasar 假设所有样式都是以 LTR 方向编写的，并为它们生成对应的 RTL 样式。如果您希望直接以 RTL 方向编写自己的 CSS，那么需要：
- (Quasar CLI with Webpack) 设置 quasar.config 文件 > “build” > rtl > “source” 为
rtl - (Quasar CLI with Vite / Quasar Vite plugin) 在 /postcss.config.js 中设置
postcssRtlCss({ source: 'rtl' })
- (Quasar CLI with Webpack) 设置 quasar.config 文件 > “build” > rtl > “source” 为
TIP
完整的 postcss-rtlcss 选项列表。
需要注意的事项
RTL 和非 RTL 的 Quasar 语言包可以共存并动态切换。所以只需选择一个 RTL 语言包就能为您触发 RTL 界面。您不需要为应用程序构建两个版本（一个非 RTL 和一个纯 RTL）。RTL 会自动为您动态切换。
您可以通过查看布尔值
$q.lang.rtl来动态检测是否处于 RTL 模式。更多信息请参阅 $q 对象。编写自己的 CSS 时需要注意。如上所述，如果启用了 RTL 支持，则 RTL（如果 postcss-rtl 配置中 “source” 设置为 “ltr” 则是 LTR）规则将根据您的 CSS 代码自动添加。例如编写：
.my-class { margin-left: 10px; right: 5px; }content_paste…将为 RTL 添加如下规则：
[dir="rtl"] .my-class { margin-right: 10px; left: 5px; }content_paste任何引用 “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 元素/组件设置例外。在这种情况下，可以在最外层的 DOM 元素/组件模板上添加 dir="ltr" 或 dir="rtl" HTML 属性：
<div dir="rtl">
<!--
this DIV and all its content will use RTL mode
regardless of Quasar language pack RTL settings
-->
</div>或者，如果您需要在 RTL 界面中为某个 DOM 元素/组件使用从左到右 (ltr) 模式：
<div dir="ltr">
<!--
this DIV and all its content will use non-RTL mode
regardless of Quasar language pack RTL settings
-->
</div>