Direction

为从右到左书写的页面指明文字方向，供各组件读取。本组件即 Base UI 的 DirectionProvider，以 zzzUI 的名称重新导出。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/direction

示例

从右到左的 Tabs

Right to left: the tabs run from the right, and the arrow keys follow.

direction-rtl.tsx

import { DirectionProvider } from "@/components/zero/direction";import { Tabs, TabsList, TabsTab } from "@/components/zero/tabs";export default function DirectionRtl() {  return (    <div dir="rtl" className="grid justify-items-start gap-3">      <DirectionProvider direction="rtl">        <Tabs defaultValue="board">          <TabsList>            <TabsTab value="board">Board</TabsTab>            <TabsTab value="map">Map</TabsTab>            <TabsTab value="drivers">Drivers</TabsTab>          </TabsList>        </Tabs>      </DirectionProvider>      <p        dir="ltr"        className="font-medium font-zero-text text-zero-sm text-zero-text-3"      >        Right to left: the tabs run from the right, and the arrow keys follow.      </p>    </div>  );}

行为

在菜单、标签页、滑块等组件中，方向键的行为随文字方向调整，弹出层也改为右对齐。此外仍需在页面（或对应元素）上设置 dir。

斜切角度不随方向镜像：无论哪种语言，所有切角都朝同一方向倾斜，因为这种倾斜和斜体一样，属于视觉风格的一部分。

属性

DirectionProvider

属性	类型	默认值	说明
direction	"ltr" \| "rtl"	"ltr"	其内部文字的书写方向。

另可传入 Base UI DirectionProvider 的全部属性。