ConfigProvider

Fournisseur de contexte pour la configuration globale. Permet une taille de composants cohérente, la localisation, le support RTL et la gestion des conteneurs de portails dans toute votre application.

Import

import { ConfigProvider, useConfig } from 'asterui'

Utilisation

Configuration de base

Enveloppez votre application avec ConfigProvider pour définir les valeurs par défaut globales :

main.tsx

import { ConfigProvider } from 'asterui'

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

Taille des composants

Définissez une taille globale pour tous les composants. Les composants individuels peuvent toujours la remplacer :

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>

        {/* Tous ces composants utiliseront la taille globale */}
        <Button>Button</Button>
        <Input placeholder="Input" />
        <Pagination total={100} />
      </div>
    </ConfigProvider>
  )
}

Localisation

Personnalisez les chaînes de paramètres régionaux pour l’internationalisation :

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

// Utiliser un paramètre régional intégré
<ConfigProvider locale={zhCN}>
  <App />
</ConfigProvider>

// Ou fournir des chaînes personnalisées
<ConfigProvider locale={{ Empty: { description: 'Keine Daten' } }}>
  <Empty />
</ConfigProvider>

Support RTL

Activer la mise en page de droite à gauche pour des langues comme l’arabe et l’hébreu :

<ConfigProvider direction="rtl">
  <div dir="rtl">
    <Button>Premier</Button>
    <Button>Deuxième</Button>
    <Button>Troisième</Button>
  </div>
</ConfigProvider>

Fournisseurs imbriqués

Les composants ConfigProvider imbriqués héritent et remplacent les paramètres parents :

<ConfigProvider componentSize="lg">
  <Button>Gros bouton</Button>

  <ConfigProvider componentSize="sm">
    {/* Cette section utilise une petite taille */}
    <Button>Petit bouton</Button>
  </ConfigProvider>
</ConfigProvider>

Conteneur de portails

Spécifiez où les modales, menus déroulants et autres portails sont rendus :

<ConfigProvider getPopupContainer={() => document.getElementById('modal-root')!}>
  <Modal open={isOpen}>
    {/* Rendu à l'intérieur de #modal-root au lieu de document.body */}
  </Modal>
</ConfigProvider>

API

Props de ConfigProvider

Propriété	Type	Défaut	Description
locale	Locale	enUS	Objet de configuration des paramètres régionaux.
componentSize	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Taille par défaut pour tous les composants.
direction	'ltr' | 'rtl'	'ltr'	Direction de la mise en page.
prefixCls	string	-	Préfixe pour les classes CSS.
getPopupContainer	(triggerNode?: HTMLElement) => HTMLElement	-	Conteneur par défaut pour les portails.
children	React.ReactNode	-	Composants enfants.

Valeur de retour de useConfig

Propriété	Type	Description
locale	Locale	Configuration des paramètres régionaux actuels.
componentSize	string	Taille globale actuelle des composants.
direction	'ltr' | 'rtl'	Direction de mise en page actuelle.
getPopupContainer	function	Fonction de conteneur de portails actuelle.

import { useConfig } from 'asterui'

function MyComponent() {
  const { locale, componentSize, direction } = useConfig()
  // Utiliser les valeurs de configuration...
}

useLocale

Accéder uniquement aux paramètres régionaux actuels :

import { useLocale } from 'asterui'

function MyComponent() {
  const locale = useLocale()
  // Utiliser les chaînes de paramètres régionaux...
}

Paramètres régionaux disponibles

Importer les paramètres régionaux depuis asterui/locale :

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

Paramètre régional	Langue
enUS	Anglais (États-Unis) - par défaut
enGB	Anglais (Royaume-Uni)
enCA	Anglais (Canada)
zhCN	Chinois (simplifié)
jaJP	Japonais
koKR	Coréen
deDE	Allemand
frFR	Français
esES	Espagnol
ptBR	Portugais (Brésil)

Accessibilité

• Utilisez direction="rtl" pour les langues de droite à gauche comme l’arabe et l’hébreu
• Les paramètres régionaux affectent le texte du lecteur d’écran dans les composants comme Empty, Pagination, etc.
• Les fournisseurs imbriqués permettent à différentes régions de votre application d’avoir des configurations différentes