ConfigProvider

Provedor de contexto para configuração global. Permite tamanho de componentes consistente, localização, suporte RTL e gerenciamento de contêineres de portais em toda a sua aplicação.

Importação

import { ConfigProvider, useConfig } from 'asterui'

Uso

Configuração básica

Envolva sua aplicação com ConfigProvider para definir padrões globais:

main.tsx

import { ConfigProvider } from 'asterui'

createRoot(document.getElementById('root')!).render(
  <ConfigProvider componentSize="sm">
    <App />
  </ConfigProvider>
)

Tamanho de componente

Defina um tamanho global para todos os componentes. Componentes individuais ainda podem sobrescrevê-lo:

function App() {
  const [size, setSize] = useState<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md')

  return (
    <ConfigProvider componentSize={size}>
      <div className="space-y-4">
        <select value={size} onChange={(e) => setSize(e.target.value)}>
          <option value="xs">Extra Small</option>
          <option value="sm">Small</option>
          <option value="md">Medium</option>
          <option value="lg">Large</option>
          <option value="xl">Extra Large</option>
        </select>

        {/* Todos estes componentes usarão o tamanho global */}
        <Button>Button</Button>
        <Input placeholder="Input" />
        <Pagination total={100} />
      </div>
    </ConfigProvider>
  )
}

Localização

Personalize strings de localização para internacionalização:

import { ConfigProvider } from 'asterui'
import { zhCN } from 'asterui/locale'

// Usar uma localização integrada
<ConfigProvider locale={zhCN}>
  <App />
</ConfigProvider>

// Ou fornecer strings personalizadas
<ConfigProvider locale={{ Empty: { description: 'Keine Daten' } }}>
  <Empty />
</ConfigProvider>

Suporte RTL

Habilite o layout da direita para esquerda para idiomas como árabe e hebraico:

<ConfigProvider direction="rtl">
  <div dir="rtl">
    <Button>Primeiro</Button>
    <Button>Segundo</Button>
    <Button>Terceiro</Button>
  </div>
</ConfigProvider>

Provedores aninhados

Componentes ConfigProvider aninhados herdam e sobrescrevem configurações do pai:

<ConfigProvider componentSize="lg">
  <Button>Botão grande</Button>

  <ConfigProvider componentSize="sm">
    {/* Esta seção usa tamanho pequeno */}
    <Button>Botão pequeno</Button>
  </ConfigProvider>
</ConfigProvider>

Contêiner de portais

Especifique onde modais, dropdowns e outros portais são renderizados:

<ConfigProvider getPopupContainer={() => document.getElementById('modal-root')!}>
  <Modal open={isOpen}>
    {/* Renderiza dentro de #modal-root ao invés de document.body */}
  </Modal>
</ConfigProvider>

API

Props do ConfigProvider

Propriedade	Tipo	Padrão	Descrição
locale	Locale	enUS	Objeto de configuração de localização.
componentSize	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Tamanho padrão para todos os componentes.
direction	'ltr' | 'rtl'	'ltr'	Direção do layout.
prefixCls	string	-	Prefixo para classes CSS.
getPopupContainer	(triggerNode?: HTMLElement) => HTMLElement	-	Contêiner padrão para portais.
children	React.ReactNode	-	Componentes filhos.

Valor de retorno do useConfig

Propriedade	Tipo	Descrição
locale	Locale	Configuração de localização atual.
componentSize	string	Tamanho global de componentes atual.
direction	'ltr' | 'rtl'	Direção de layout atual.
getPopupContainer	function	Função de contêiner de portais atual.

import { useConfig } from 'asterui'

function MyComponent() {
  const { locale, componentSize, direction } = useConfig()
  // Usar valores de configuração...
}

useLocale

Acesse apenas a localização atual:

import { useLocale } from 'asterui'

function MyComponent() {
  const locale = useLocale()
  // Usar strings de localização...
}

Localizações disponíveis

Importe localizações de asterui/locale:

import { zhCN, jaJP, koKR, deDE, frFR, esES, ptBR, enGB, enCA } from 'asterui/locale'

Localização	Idioma
enUS	Inglês (EUA) - padrão
enGB	Inglês (Reino Unido)
enCA	Inglês (Canadá)
zhCN	Chinês (Simplificado)
jaJP	Japonês
koKR	Coreano
deDE	Alemão
frFR	Francês
esES	Espanhol
ptBR	Português (Brasil)

Acessibilidade

• Use direction="rtl" para idiomas da direita para esquerda como árabe e hebraico
• Configurações de localização afetam o texto do leitor de tela em componentes como Empty, Pagination, etc.
• Provedores aninhados permitem que diferentes regiões da sua aplicação tenham configurações diferentes