DirectionProvider
Provedor de direção que avisa os componentes que o texto é lido da direita para a esquerda, para que sliders, abas, barras de ferramentas e popups sigam essa direção. Use junto com dir num elemento, para árabe, hebraico, persa ou urdu.
Instalação
Configure o Camaleo uma vez (Instalação) e importe. É o DirectionProvider do Base UI, reexportado.
import { DirectionProvider } from "@camaleo/react";Você precisa de duas coisas, e cada uma faz um trabalho diferente:
dir="rtl"num elemento (normalmente o<html>, comlang) espelha o layout: alinhamento do texto, ordem do flex e do grid, e todas as propriedades lógicas dos estilos.<DirectionProvider direction="rtl">avisa o JavaScript dos componentes: qual seta avança, de que ponta o slider começa e para que lado o popup se alinha. O navegador não tem como contar isso a eles.
Anatomia
Ele não renderiza nenhum elemento: só coloca a direção no contexto do React. O atributo dir fica por sua conta.
Exemplos
Os textos em árabe e hebraico são frases curtas de exemplo (Salvar, Cancelar, Configurações…). Peça a um falante nativo para revisar os textos reais.
Sliders começam pela direita
Foque cada slider e use as setas. Em RTL o preenchimento cresce da direita, a seta para a esquerda aumenta o valor e a seta para a direita diminui, então a tecla combina com o movimento.
כללי
Abas invertem as setas
A primeira aba fica à direita. A seta para a esquerda vai para a próxima aba; Home e End continuam indo para a primeira e a última.
Menus numa seção da direita para a esquerda
Abra o menu. Para cima e para baixo não mudam. O popup é renderizado no <body>, então passe dir para ele; ele se alinha à borda direita do gatilho quando o <html> tem dir="rtl".
Que bom ver você de novo
Você tem três mensagens novas.
Trocar a direção em tempo de execução
Ligue o switch. Mude o provider, o dir e o lang juntos, e espelhe os ícones que significam "avançar" ou "voltar".
Suas alterações foram salvas.
تم حفظ التغييرات.
Propriedades lógicas no seu CSS
Escreva padding-inline-start e border-inline-start, não left e right. Assim o mesmo aviso funciona nas duas direções, sem uma segunda folha de estilo.
رقم الطلب: #A-4821
Conteúdo da esquerda para a direita dentro
E-mails, telefones e códigos são lidos da esquerda para a direita. Dê dir="ltr" aos campos deles e envolva valores no meio do texto em <bdi>, para não embaralhar a frase.
Em contexto
Pedaços inteiros de interface em idiomas da direita para a esquerda, no estilo que você escolheu.
الإعدادات
סיכום הזמנה
- סכום ביניים
- ₪240
- משלוח
- חינם
- סה״כ
- ₪240
عوامل التصفية
Boas práticas
O rótulo, o preenchimento e as setas concordam entre si.
O preenchimento começa pela direita, mas a seta para a direita aumenta o valor e o clique cai no ponto espelhado.
البريد الوارد12
margin-inline-start mantém o espaço entre a palavra e o badge em qualquer direção.
البريد الوارد12
O espaço vai para o lado errado e o badge encosta na palavra.
Props
Ele não renderiza elemento, então não recebe outras props. Defina dir e lang num elemento você mesmo.
Styling hooks
Não há nada para estilizar no provider. Os estilos usam propriedades lógicas em tudo, então seguem o dir; use-o quando precisar de uma regra só para uma direção.
Atributos
Tokens que ele lê
/* espelha ícones de direção em páginas da direita para a esquerda */
:dir(rtl) .icone-avancar {
scale: -1 1;
}Acessibilidade
- O provider não tem elemento e não recebe foco. Os leitores de tela descobrem a direção e o idioma pelo dir e pelo lang dos seus elementos.
- Defina lang junto com dir, para que os leitores de tela leiam árabe ou hebraico com a voz certa.
- Popups são renderizados no <body>. Defina dir no <html> para uma página toda em RTL, ou passe dir ao popup dentro de uma seção da direita para a esquerda.
- Espelhe os ícones que apontam para avançar ou voltar. Não mexa nos que não apontam, como play, check ou relógio.