语义ui框架支持rtl语言吗?

时间:2015-06-07 13:41:18

标签: css frameworks

如何支持语义ui框架“从右到左”?在那儿 无论如何要在安装步骤时支持rtl?

3 个答案:

答案 0 :(得分:5)

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

1。全新安装

转到项目的文档根目录并通过npm

安装semantic-ui
  

npm install semantic-ui --save

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

  

“rtl”:true

终端更改目录中的

语义目录

  

cd semantic /

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

  

gulp build

gulp将自动检测RTL支持并构建RTL版本的css文件并将其保存在dist文件夹中,现在非常重要的最后一步是在索引中引用语义ui css文件的RTL版本.html 或网页如下:

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

2。现有安装

终端更改目录中的

语义目录

  

cd semantic /

使用semantic-ui framework

提供的gulp任务清理目标文件夹
  

清洁干净

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

  

“rtl”:true

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

  

gulp build

gulp将自动检测RTL支持并构建RTL版本的css文件并将其保存在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">

答案 1 :(得分:1)

<强>第一 导航到您的项目根目录然后触发: npm install semantic-ui --save 等待一切都完成。

<强>第二 编辑 semantic.json 文件(位于项目根目录中)并将 “rtl”:false 更改为 “rtl”:真

<强>第三 导航到语义目录(cd semantic)和fire: gulp build 然后 gulp watch

最好的问候 Shahab Rabiei

答案 2 :(得分:0)

或者,如果您不打算通过npm和gulp安装它,则可以从RTLCSS website获得rtl版本。它们还提供了CDN,或者您可以下载css和js文件并在源代码中使用它们。