css - 语义 ui 框架是否支持 rtl 语言？

Question

如何使语义 UI 框架支持“从右到左”？有没有无论如何要让它在安装步骤中支持 rtl 吗？

Answer 1

您可以在以下情况下启用 RTL 支持:

1。全新安装

进入你元素的文档根目录，通过npm安装semantic-ui

npm install semantic-ui --save

修改文档根目录中的 semantic.json 文件以启用从右到左的支持，如下所示:

"rtl": true

在你的终端改变目录到semantic目录

cd semantic/

运行以下 gulp 任务来构建所有文件并将其保存到目标文件夹

gulp build

gulp 将自动检测 RTL 支持并构建 css 文件的 RTL 版本并将它们保存在 dist 文件夹中，现在非常重要的最后一步是在您的 index 中引用 semantic-ui css 文件的 RTL 版本.html 或如下网页:

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">

---

2。现有安装

在你的终端改变目录到semantic目录

cd semantic/

使用semantic-ui框架提供的gulp任务清理目标文件夹

gulp clean

修改文档根目录中的 semantic.json 文件以启用从右到左的支持，如下所示:

"rtl": true

运行以下 gulp 任务来构建所有文件并将其保存到目标文件夹

gulp build

gulp 将自动检测 RTL 支持并构建 css 文件的 RTL 版本并将它们保存在 dist 文件夹中。

现在您需要将 html 页面中的引用替换为

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.css">

到

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">