UIkit 支持从右到左书写的语言,并且允许你切换所有设计元素的方向。
RTL 版本会切换 UIkit 设计元素的方向,包括浮动、text-align、位置坐标、背景阴影方向等属性。不过,所有明确以 *-left 或 *-right 命名的类在 RTL 版本中保持不变。
要在 RTL 模式下使用 UIkit,请使用 dist/ 文件夹中提供的 uikit.rtl.min.css。确保为网站的 <html> 标签添加 dir="rtl" 属性。JavaScript 默认支持 RTL,因此可以直接引入常规的 JS 文件,无需做任何改动。
<!DOCTYPE html>
<html dir="rtl">
<head>
<title></title>
<link rel="stylesheet" href="css/uikit.rtl.min.css" />
<script src="js/uikit.min.js"></script>
</head>
<body>
</body>
</html>浏览可用的组件,照常创建标记即可。使用 RTL 版本时没有任何区别。
如果你从 GitHub 源码安装 UIkit,也可以自行编译 RTL 版本的 UIkit。编译时会包含你在 custom/ 目录中创建的任何自定义 UIkit 主题。
pnpm install
pnpm compile-rtl生成的文件位于 dist/ 文件夹中,以 *.rtl.css 结尾。JavaScript 文件与默认的 LTR 版本保持一致。