コンポーネント例
言語を切り替えて操作を試してください。レイアウト、文字の配置、余白、ナビゲーションの矢印、スライダーの動作、オーバーレイの位置が、選んだ方向に従います。Proのチャートカードも含みます。
テンプレート例
実際のテンプレートをアラビア語、ヘブライ語、英語サンプルコンテンツでご覧ください。言語を切り替えて、コピー、レイアウト、インタラクションを一緒に確認します。
方向提供者
ロケールを明示すると、CSSの方向、キーボード操作、カレンダー、ポータル内のメニューを一致させられます。複数の言語が混在する領域ではプロバイダーを入れ子にできます。標準のcontentsラッパーは既存のレイアウトを維持します。
RTLの設定
インストール DirectionProvider。その後、アプリケーションの言語と方向を設定します。RTL専用のCLIフラグや、別バージョンのコンポーネントは不要です。
npx boardui@latest add directionapp/layout.tsx
import { DirectionProvider } from "@/components/foundations/direction/direction";import "@/styles/globals.css";
export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="ar" dir="rtl"> <body> <DirectionProvider locale="ar">{children}</DirectionProvider> </body> </html> );}locale="ar" RTL に解決します。 he ヘブライ語のために、 en-USについて 英語、または zh-CN LTRのまま中国人のために。 設定 dir だけではCSSのみが変わります。プロバイダーはReact Ariaのキーボード操作、カレンダー、ポータル内のメニューも設定します。
混合言語地域
// Works in Next.js, Vite, React Router, and other React apps.<DirectionProvider locale="he"> <AccountSettings /></DirectionProvider>
// Providers can be nested for a region in another language.<DirectionProvider locale="ar"> <Dashboard /> <DirectionProvider locale="en-US"> <EnglishSupportPanel /> </DirectionProvider></DirectionProvider>手動で導入する場合は、BoardUI setupを完了し、react-aria-componentsをインストールして、以下のプロバイダーのソースをコピーしてください。
components/foundations/direction/direction.tsx
// components/foundations/direction/direction.tsx"use client";
import type { HTMLAttributes, ReactNode } from "react";import { I18nProvider, useLocale } from "react-aria-components";import { cx } from "@/utils/cx";
export type Direction = "ltr" | "rtl";
export interface DirectionProviderProps extends Omit<HTMLAttributes<HTMLDivElement>, "dir" | "lang" | "children"> { /** BCP 47 language tag. Arabic and Hebrew resolve to RTL; Chinese to LTR. */ locale: string; children: ReactNode;}
/** Keeps CSS direction, React Aria keyboard behavior and portalled menus in sync. * Use at the app root, or nest providers for regions in another language. * The default display: contents boundary preserves the surrounding layout. */export function DirectionProvider({ locale, ...props }: DirectionProviderProps) { return ( <I18nProvider locale={locale}> <DirectionBoundary {...props} /> </I18nProvider> );}
function DirectionBoundary({ children, className, ...props }: Omit<DirectionProviderProps, "locale">) { const { locale, direction } = useLocale(); return <div {...props} lang={locale} dir={direction} className={cx("contents", className)}>{children}</div>;}
/** Also works inside a React Aria I18nProvider. */export function useDirection(): Direction { return useLocale().direction;}既存のプロジェクト
BoardUIはソースコードをプロジェクトに追加します。プロバイダーを追加し、RTL対応前にインストールしたコンポーネントを更新してください。次を使う前に、独自の変更をバックアップしてください： --overwriteを使うか、最新版のソースを編集済みのファイルにマージしてください。テンプレートに加え、ボタン、メニューのスタイル、アイコン、グローバルCSSなどの共有依存ファイルも更新してください。
npx boardui@latest add button select tabs --overwriteProのコンポーネントとテンプレートも同じプロバイダーと論理方向のスタイルを使います。有効なライセンスでCLIから更新するか、更新済みのソースパッケージをダウンロードしてください。コンポーネントを再インストールせずに、実行時にロケールを切り替えられます。
方向スタイル
利用条件 ps / pe, ms / me, start / end, と text-start / text-end カスタムレイアウトで。 フレックスとグリッドは、自動的に領域の方向に従う。 ナビゲーショングリフの使用 rtl:rotate-180。BoardUIのボタンに渡したナビゲーションの矢印アイコンは、方向に合わせて反転します。
メールアドレス、URL、OTPの数字、ソースコードは、本来の左から右の順序を維持してください。次を使用します： inputDir フィールドの値をラベルの独立で制御し、 bdi で、方向の異なる文字列を分離します。チャートの軸とデータは座標の順序を維持し、カードのレイアウトと操作部分はRTLに従います。
混合コンテンツ
<Input label="البريد الإلكتروني" type="email" /> // value defaults to LTR<Input label="الاسم" inputDir="auto" />
<p>تم إرسال رسالة إلى <bdi>sara@example.com</bdi></p><pre dir="ltr"><code>npm run build</code></pre>BoardUIのオーバーレイはロケールを引き継ぎます。独自のポータルを作る場合は、元のDOM領域の外でも正しく表示されるよう、ルート要素に方向を渡してください。
カスタムポータル
import { createPortal } from "react-dom";import { useDirection } from "@/components/foundations/direction/direction";
function CustomOverlay() { const direction = useDirection(); return createPortal(<div dir={direction}>…</div>, document.body);}通知はデフォルトでスタックします。 bottom-end. 使用 top-start, top-end, または bottom-start 論理的な角のため。 明示的 ふりがな そして、 右から 位置は物理的意味を保持します。
ローカリゼーションとフォント
RTL対応はレイアウトと操作を扱います。上の例はアラビア語とヘブライ語のサンプル翻訳を含みます。アプリのラベル、アクセシブルな名前、通貨、メッセージは、アプリの翻訳層で管理してください。React Ariaはロケールに合った操作用の文言を提供します。次を使用してください： Intl.NumberFormat そして、 Intl.DateTimeFormat アプリケーションデータのため。
Noto Sans ArabicやNoto Sans Hebrewなど、対象言語の文字を含むフォントを選んでください。フレームワークのフォント機能で読み込み、BoardUIの次の設定に追加します： --font-sans stack. アラビア語のテキストは接続された形成および快適なラインの高さを必要とします;余分手紙の間隔を避けて下さい。中国語はLTRのレイアウトが付いている同じlocaleの基礎を使用します。
アプローチは、論理的なスタイルの原則に従っています。 シェードク/ui 用途・用途 React Aria の locale プロバイダー BoardUIの既存のインタラクションプリミティブ用。