Suporte a RTL
BoardUI tem suporte completo a RTL para árabe, hebraico e outros idiomas escritos da direita para a esquerda, nos componentes gratuitos, blocos Pro e templates.
Exemplos de componentes
Troque o idioma e teste os controles. Layout, alinhamento do texto, espaçamentos, setas de navegação, comportamento dos controles deslizantes e posição das sobreposições seguem a direção escolhida. Os exemplos incluem um card de gráfico Pro.
Exemplos de templates
Explore os templates reais com conteúdo de exemplo em árabe, hebraico e inglês. Troque o idioma para ver os textos, o layout e as interações juntos.
Provider de direção
Uma localidade explícita mantém a direção CSS, a navegação por teclado, os calendários e os menus em portais sincronizados. Use providers aninhados em regiões com vários idiomas. O wrapper padrão de conteúdo preserva seu layout.
Configurar RTL
Instalar o DirectionProvider, depois defina o idioma e a direção do aplicativo. Não é necessário usar uma flag RTL na CLI nem uma versão diferente do componente.
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" resolve para RTL. Use he para o hebraico, en-US para o inglês, ou zh-CN para chinês, que permanece LTR. dir sozinho só atualiza o CSS. O provider também configura a navegação por teclado, os calendários e os menus em portais do React Aria.
Regiões com vários idiomas
// 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>Para instalar manualmente, conclua a BoardUI setup, instale react-aria-components e copie o código do provider abaixo.
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;}Projetos existentes
BoardUI instala código-fonte no seu projeto. Adicione o provider e atualize os componentes instalados antes do suporte a RTL. Faça backup das suas personalizações antes de usar --overwrite, ou mescle o código-fonte atual nos arquivos que você editou. Atualize o template e as dependências compartilhadas, como botões, estilos de menu, ícones e CSS global.
npx boardui@latest add button select tabs --overwriteComponentes e templates Pro usam o mesmo provider e os mesmos estilos lógicos. Instale as atualizações pela CLI com sua licença ou baixe o pacote de código atualizado. O aplicativo pode mudar de localidade durante a execução sem reinstalar componentes.
Estilos direcionais
Utilização ps / pe, ms / me, start / end, e text-start / text-end em layouts personalizados. Flex e grade siga automaticamente a direção da região. rtl:rotate-180; ícones passados para botões BoardUI são espelhados quando eles são setas de navegação.
Mantenha endereços de e-mail, URLs, dígitos OTP e código-fonte na ordem LTR natural. Use inputDir controlar o valor de um campo independentemente do seu rótulo, e bdi para isolar textos mistos. Os eixos e dados dos gráficos mantêm a ordem das coordenadas; o layout dos cards e os controles seguem RTL.
Conteúdo misto
<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>As sobreposições BoardUI preservam a localidade. Ao criar um portal personalizado, passe a direção ao elemento raiz para que ele seja renderizado corretamente fora da região DOM original.
Portais personalizados
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);}Pilha de notificação padrão bottom-end. Utilização top-start, top-end, ou bottom-start para cantos lógicos. Explícito esquerda e direita As posições mantêm o seu significado físico.
Localização e fontes
O suporte a RTL cuida do layout e das interações. Os exemplos acima incluem traduções de demonstração em árabe e hebraico. Rótulos, nomes acessíveis, moedas e mensagens do aplicativo são responsabilidade da sua camada de tradução. React Aria fornece textos de interação localizados; use Intl.NumberFormat e Intl.DateTimeFormat para os dados de aplicativo.
Escolha uma fonte que inclua os caracteres do idioma, como Noto Sans Arabic ou Noto Sans Hebrew. Carregue-a com as ferramentas do seu framework e adicione à configuração de --font-sans . O texto em árabe precisa de letras conectadas e uma altura de linha confortável; evite espaçamento extra entre letras. Chinês usa a mesma base de localidade com layout LTR.
A abordagem segue o princípio do estilo lógico utilizado por shadcn/ui e utilizações React o fornecedor local da Aria para os primitivos de interação existentes da BoardUI.