跳到主要内容

文档

从右到左支持

UIkit 支持从右到左的语言，并允许您切换所有设计元素的方向。

RTL 版本切换了 UIkit 设计元素的方向，包括浮动、文本对齐、位置坐标、背景阴影的方向等属性。然而，所有明确命名为 *-left 或 *-right 的类在 RTL 版本中保持不变。

用法

要在 RTL 模式下使用 UIkit，请使用 dist/ 文件夹中包含的 uikit.rtl.min.css。请确保将 dir="rtl" 属性添加到您网站的 <html> 标签中。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，您也可以自己编译 UIkit 的 RTL 版本。这将包括您在 custom/ 目录中创建的任何自定义 UIkit 主题。

pnpm install
pnpm compile-rtl

生成的文件现在位于 dist/ 文件夹中，并以 *.rtl.css 结尾。JavaScript 文件与默认的 LTR 版本保持不变。