---
title: 双向布局（RTL）
description: 让组件跟随从右到左的书写方向，以及哪些地方刻意不镜像
---
# 双向布局（RTL）
组件库同时支持 LTR / RTL。镜像的原则只有一条：**跟随行内方向**（inline direction），
而不是「左边换成右边」的粗暴翻转。
## 怎么开启
**整站（推荐）**：宿主在 `` 上声明方向，组件零配置跟随：
```html
```
视觉镜像完全由 CSS 的 `[dir='rtl']` 选择器驱动；需要方向语义的 JS 逻辑
（浮层对齐轴、键盘左右键）由 `useDirection()` 读取 —— 它会观察
`documentElement` 的 `dir` / `class` / `style`，运行时切换也能跟上。
**局部子树**：同一页里既有 LTR 又有 RTL 时，用 `G3ConfigProvider`：
```vue
…
```
它会把 `dir` 挂到子树根，同时通过 `provide` 下发。这条路径**在 SSR 首帧就生效**，
不受「挂载后才能探测 DOM」影响，是服务端渲染场景的首选。
**组件树外**：`G3Message` / `G3Notification` 这类拿不到 `inject` 的实例走全局兜底：
```ts
G3UI.config({ direction: 'rtl' })
```
优先级：`ConfigProvider` → 全局配置 → 文档方向（``）→ `ltr`。
## 写组件样式的规矩
镜像靠**逻辑属性**实现，组件 `