小智 5
您可以在以下方案中启用RTL支持:
转到项目的文档根目录并通过npm安装semantic-ui
npm install semantic-ui --save
修改文档根目录中的semantic.json文件以启用从右到左的支持,如下所示:
"rtl":是的
在您的终端更改目录到语义目录
cd语义/
运行以下gulp任务来构建所有文件并将其保存到目标文件夹
gulp build
gulp将自动检测RTL支持并构建RTL版本的css文件并将它们保存在dist文件夹中,现在一个非常重要的最后一步是在index.html或web页面中引用语义ui css文件的RTL版本以下:
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">
在您的终端更改目录到语义目录
cd语义/
使用semantic-ui框架提供的gulp任务清理目标文件夹
吞了一口气
修改文档根目录中的semantic.json文件以启用从右到左的支持,如下所示:
"rtl":是的
运行以下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">
首先： 导航到项目根目录，然后启动：npm install语义-ui --save 并等待所有完成。
第二： 编辑semantic.json文件（位于项目根目录）并将“rtl”：false更改为“rtl”：true
第三： 导航到语义目录（cd语义）并启动：gulp build然后gulp watch。