跳到主要内容

文档

从右到左(RTL)支持

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 版本保持一致。