从右到左的支持/Right-to-left support

UIkit支持从右到左的语言,并允许您改变所有设计元素的方向。

RTL版本切换UIkit设计元素的方向,包括浮动(floats)、文本对齐(text-align)、位置坐标(position coordinates)、背景的阴影方向等属性。并且所有显式命名为 *-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, 这将包括您在 custom/ 目录中创建的任何 自定义UIkit主题

yarn
yarn compile-rtl

生成的文件位于 dist/ 文件夹中,并以 *.rtl.css结尾。 JavaScript文件与默认LTR版本保持相同。

上一篇: Avoiding-conflicts

下一篇: Migration

rtl.md

# 从右到左的支持/Right-to-left support

<p class="uk-text-lead">UIkit支持从右到左的语言,并允许您改变所有设计元素的方向。</p>

RTL版本切换UIkit设计元素的方向,包括浮动(floats)、文本对齐(text-align)、位置坐标(position coordinates)、背景的阴影方向等属性。并且所有显式命名为 `*-left` 或 `*-right` 的类名在RTL版本中可以保持不变。

***

## Usage-用法

要在RTL模式下使用UIkit,请使用 `dist/` 文件夹中的 `uikit.rtl.min.css` 文件。确保将 `dir="rtl"` 属性添加到您网站的 `<html>` 标记中。JavaScript默认情况下支持RTL,因此您可以包含常规JS文件而无需进行任何更改。

```html
<!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版本时没有任何区别。

***

## Compile from source-从源代码编译

如果您 [从Github源设置UIkit](installation.md#compile-from-github-source), 这将包括您在 `custom/` 目录中创建的任何 [自定义UIkit主题 ](less.md) 。

```sh
yarn
yarn compile-rtl
```

生成的文件位于 `dist/` 文件夹中,并以 `*.rtl.css`结尾。 JavaScript文件与默认LTR版本保持相同。