ConfigProvider

Proveedor de contexto para configuración global. Permite un tamaño de componentes consistente, localización, soporte RTL y gestión de contenedores de portales en toda tu aplicación.

Importar

import { ConfigProvider, useConfig } from 'asterui'

Uso

Configuración básica

Envuelve tu aplicación con ConfigProvider para establecer valores predeterminados globales:

main.tsx

import { ConfigProvider } from 'asterui'

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

Tamaño de componente

Establece un tamaño global para todos los componentes. Los componentes individuales aún pueden anularlo:

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 estos componentes usarán el tamaño global */}
        <Button>Button</Button>
        <Input placeholder="Input" />
        <Pagination total={100} />
      </div>
    </ConfigProvider>
  )
}

Localización

Personaliza las cadenas de locale para internacionalización:

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

// Usar un locale integrado
<ConfigProvider locale={zhCN}>
  <App />
</ConfigProvider>

// O proporcionar cadenas personalizadas
<ConfigProvider locale={{ Empty: { description: 'Keine Daten' } }}>
  <Empty />
</ConfigProvider>

Soporte RTL

Habilita el diseño de derecha a izquierda para idiomas como árabe y hebreo:

<ConfigProvider direction="rtl">
  <div dir="rtl">
    <Button>Primero</Button>
    <Button>Segundo</Button>
    <Button>Tercero</Button>
  </div>
</ConfigProvider>

Proveedores anidados

Los componentes ConfigProvider anidados heredan y anulan las configuraciones del padre:

<ConfigProvider componentSize="lg">
  <Button>Botón grande</Button>

  <ConfigProvider componentSize="sm">
    {/* Esta sección usa tamaño pequeño */}
    <Button>Botón pequeño</Button>
  </ConfigProvider>
</ConfigProvider>

Contenedor de portales

Especifica dónde se renderizan los modales, desplegables y otros portales:

<ConfigProvider getPopupContainer={() => document.getElementById('modal-root')!}>
  <Modal open={isOpen}>
    {/* Se renderiza dentro de #modal-root en lugar de document.body */}
  </Modal>
</ConfigProvider>

API

Props de ConfigProvider

Propiedad	Tipo	Predeterminado	Descripción
locale	Locale	enUS	Objeto de configuración de locale.
componentSize	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Tamaño predeterminado para todos los componentes.
direction	'ltr' | 'rtl'	'ltr'	Dirección del diseño.
prefixCls	string	-	Prefijo para clases CSS.
getPopupContainer	(triggerNode?: HTMLElement) => HTMLElement	-	Contenedor predeterminado para portales.
children	React.ReactNode	-	Componentes hijos.

Valor de retorno de useConfig

Propiedad	Tipo	Descripción
locale	Locale	Configuración de locale actual.
componentSize	string	Tamaño global de componentes actual.
direction	'ltr' | 'rtl'	Dirección de diseño actual.
getPopupContainer	function	Función de contenedor de portales actual.

import { useConfig } from 'asterui'

function MyComponent() {
  const { locale, componentSize, direction } = useConfig()
  // Usar valores de configuración...
}

useLocale

Accede solo al locale actual:

import { useLocale } from 'asterui'

function MyComponent() {
  const locale = useLocale()
  // Usar cadenas de locale...
}

Locales disponibles

Importa locales desde asterui/locale:

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

Locale	Idioma
enUS	Inglés (EE.UU.) - predeterminado
enGB	Inglés (Reino Unido)
enCA	Inglés (Canadá)
zhCN	Chino (Simplificado)
jaJP	Japonés
koKR	Coreano
deDE	Alemán
frFR	Francés
esES	Español
ptBR	Portugués (Brasil)

Accesibilidad

• Usa direction="rtl" para idiomas de derecha a izquierda como árabe y hebreo
• Las configuraciones de locale afectan el texto del lector de pantalla en componentes como Empty, Pagination, etc.
• Los proveedores anidados permiten que diferentes regiones de tu aplicación tengan diferentes configuraciones