跳到内容
1.6k

方向

一个用于在从左到右（LTR）和从右到左（RTL）方向之间切换组件的上下文提供程序，可确保菜单、滑块和标签页在阿拉伯语、希伯来语和波斯语中正确镜像显示。

DirectionProvider 组件用于为应用设置文本方向（ltr 或 rtl）。这对于支持阿拉伯语、希伯来语、波斯语等从右向左书写的语言至关重要。

以下是该组件在 RTL 模式下的预览。使用语言选择器来切换语言。若需查看更多示例，请前往各组件页面的 RTL 部分。

在组件树外包一层，所有对方向敏感的组件——下拉菜单、滑块、标签页、工具提示——都会从 React context 读取方向，而不用去嗅探 DOM。它基于 Base UI Direction Provider 工具构建；本身不渲染任何内容，也不自带样式——新粗野主义的边框和阴影仍在它所指挥的那些组件里。

适合以下场景：

  • 阿拉伯语、希伯来语或波斯语应用——方向键导航、弹出层对齐、滑块行为会随阅读方向翻转。
  • 语言切换器——用户切换语言时，把 provider 的 direction 与 <html> 上的 dir 一起切换。
  • 混合方向页面——在整体 LTR 的应用里，给某个 RTL 区块（嵌入表单、引用内容）再嵌一层 provider。

安装

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/direction.json
npx shadcn@latest add https://neobrutalism.com/r/base/direction.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/direction.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/direction.json

安装以下依赖：

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

将以下代码复制并粘贴到您的项目中。

components/ui/direction.tsx
"use client"

import * as React from "react"
import { Direction } from "radix-ui"

function DirectionProvider({
  dir,
  direction,
  children,
}: React.ComponentProps<typeof Direction.DirectionProvider> & {
  direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"]
}) {
  return (
    <Direction.DirectionProvider dir={direction ?? dir}>
      {children}
    </Direction.DirectionProvider>
  )
}

const useDirection = Direction.useDirection

export { DirectionProvider, useDirection }

更新导入路径以匹配您的项目结构。

用法

import { DirectionProvider } from "@/components/ui/direction"
<html dir="rtl">
  <body>
    <DirectionProvider direction="rtl">
      {/* Your app content */}
    </DirectionProvider>
  </body>
</html>

useDirection

useDirection Hook 用于获取应用当前的方向。

import { useDirection } from "@/components/ui/direction"
 
function MyComponent() {
  const direction = useDirection()
  return <div>Current direction: {direction}</div>
}

无障碍

DirectionProvider 只指挥组件逻辑——它从不设置 dir 属性。请同时在 <html>（或包裹元素）上设置 dir：浏览器、屏幕阅读器和 CSS 逻辑属性都从 DOM 属性解析方向，而不是从 React context。两者保持同步，RTL 页面才能既正确渲染，也正确朗读。