-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(cn): translate features/rtl.md (#100)
Co-authored-by: QiChang Li <github@liqichang.com>
- Loading branch information
1 parent
32c9a5d
commit 64dea3e
Showing
1 changed file
with
6 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,25 +1,25 @@ | ||
# RTL | ||
# 从右到左 {#rtl} | ||
|
||
Windi CSS has out-of-box RTL support with zero configuration from `v2.5.4`. | ||
自 `v2.5.4` 起可用,Windi CSS 拥有开箱即用的从右到左(RTL)书写方式支持,且无需任何配置。 | ||
|
||
By prefixing the `rtl:` variant to the utilities, they will only apply when RTL is enabled. | ||
通过向工具类前方增加 `rtl:` 可变修饰即可,仅在 RTL 启用时生效。 | ||
|
||
<!-- With the following example, the `Preview` text will be `text-right` and `text-red-400` on the RTL. Try play with it: --> | ||
|
||
<!-- <InlinePlayground :input="'text-green-400 rtl:(text-right text-red-400)'" :showCSS="true" :showPreview="true" /> --> | ||
|
||
It's easy to enable RTL, you just need to apply `dir="rtl"` on the `html` element to make it affects. | ||
开启 RTL 很简单,只需要在 `html` 标签上增加 `dir="rtl"` 属性就可使其生效。 | ||
|
||
```html | ||
<html> | ||
<body> | ||
<!-- RTL disabled --> | ||
<!-- RTL 禁用 --> | ||
</body> | ||
</html> | ||
|
||
<html dir="rtl"> | ||
<body> | ||
<!-- RTL enabled --> | ||
<!-- RTL 启用 --> | ||
</body> | ||
</html> | ||
``` |