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
# 从右到左的支持/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版本保持相同。