跳至主要內容

文件

由右至左支援

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 版本保持不變。