ConfigProvider (configuration)

Fournit une configuration globale aux composants enfants par provide/inject, avec une gestion unifiée du thème, des tailles et de l'internationalisation.

Utilisation de base

Taille par défaut :

Taille small :

vue

<script setup lang="ts">
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <!-- Taille par défaut -->
  <LhButton>Bouton par défaut</LhButton>
  <!-- Bouton principal (désactivé) -->
  <LhButton type="primary" disabled>Bouton principal</LhButton>
  <!-- Taille small -->
  <LhConfigProvider :size="'small'">
    <!-- Petit bouton -->
    <LhButton>Petit bouton</LhButton>
    <!-- Petit bouton principal -->
    <LhButton type="primary">Petit bouton principal</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
}
</script>

<template>
  <!-- Taille par défaut -->
  <LhButton>Bouton par défaut</LhButton>
  <!-- Bouton principal (désactivé) -->
  <LhButton type="primary" disabled>Bouton principal</LhButton>
  <!-- Taille small -->
  <LhConfigProvider :size="'small'">
    <!-- Petit bouton -->
    <LhButton>Petit bouton</LhButton>
    <!-- Petit bouton principal -->
    <LhButton type="primary">Petit bouton principal</LhButton>
  </LhConfigProvider>
</template>

Couleur de thème personnalisée

vue

<script setup lang="ts">
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <LhConfigProvider :theme-vars="{ 'primary-color': '#e6a23c' }">
    <LhButton>Par défaut</LhButton>
    <LhButton type="primary">Thème doré</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
}
</script>

<template>
  <LhConfigProvider :theme-vars="{ 'primary-color': '#e6a23c' }">
    <LhButton>Par défaut</LhButton>
    <LhButton type="primary">Thème doré</LhButton>
  </LhConfigProvider>
</template>

Thème par composant (componentTheme)

componentTheme permet de surcharger les variables de thème d'un composant spécifique, avec une priorité supérieure aux themeVars globales.

vue

<script setup lang="ts">
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <LhConfigProvider
    :component-theme="{ button: { 'primary-color': '#e6a23c' } }"
  >
    <!-- Button en thème doré -->
    <LhButton type="primary">Button en thème doré</LhButton>
    <!-- Success non affecté -->
    <LhButton type="success">Success non affecté</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
}
</script>

<template>
  <LhConfigProvider
    :component-theme="{ button: { 'primary-color': '#e6a23c' } }"
  >
    <!-- Button en thème doré -->
    <LhButton type="primary">Button en thème doré</LhButton>
    <!-- Success non affecté -->
    <LhButton type="success">Success non affecté</LhButton>
  </LhConfigProvider>
</template>

Liste blanche des motifs d'arrière-plan (patternComponents)

patternComponents permet de spécifier les composants autorisés à appliquer un motif d'arrière-plan.

vue

<script setup lang="ts">
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <LhConfigProvider :pattern-components="['button']">
    <LhButton bg-pattern="var(--lh-pattern-willow)">Motif feuille de saule</LhButton>
    <LhButton bg-pattern="var(--lh-pattern-cloud)">Motif nuage de bon présage</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
}
</script>

<template>
  <LhConfigProvider :pattern-components="['button']">
    <LhButton bg-pattern="var(--lh-pattern-willow)">Motif feuille de saule</LhButton>
    <LhButton bg-pattern="var(--lh-pattern-cloud)">Motif nuage de bon présage</LhButton>
  </LhConfigProvider>
</template>

La valeur de bg-pattern est une variable CSS (par exemple var(--lh-pattern-willow)) ou une URL d'image ; écrire directement le nom du motif (par exemple willow) est sans effet. Pour la liste des noms de motifs, voir Personnalisation des motifs.

Internationalisation

Configurez le pack de langue global au moyen de locale.

vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhButton, zhCN, enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const currentLocale = computed(() => locale.value === 'zh-CN' ? zhCN : enUS)
function toggleLocale() {
  locale.value = locale.value === 'zh-CN' ? 'en-US' : 'zh-CN'
}
</script>

<template>
  <LhConfigProvider :locale="currentLocale">
    <LhButton @click="toggleLocale">
      {{ locale === 'zh-CN' ? 'Switch to English' : '切换中文' }}
    </LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton, zhCN, enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
  data() {
    return { locale: 'zh-CN' }
  },
  computed: {
    currentLocale() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
  methods: {
    toggleLocale() {
      this.locale = this.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
    },
  },
}
</script>

<template>
  <LhConfigProvider :locale="currentLocale">
    <LhButton @click="toggleLocale">
      {{ locale === 'zh-CN' ? 'Switch to English' : '切换中文' }}
    </LhButton>
  </LhConfigProvider>
</template>

ConfigProvider API

Props

Propriété	Description	Type	Valeur par défaut
size	Taille globale	`LhSizes`	—
locale	Configuration d'internationalisation	`LocaleType`	—
themeVars	Variables de thème globales	`{ [x: string]: string; }`	—
patternComponents	Liste blanche des motifs d'arrière-plan	`[LhThemeableComponent](#type-LhThemeableComponent)`[]	—
componentTheme	Variables de thème par nom de composant	{ button?: Record<string, string>; input?: Record<string, string>; dialog?: Record<string, string>; tooltip?: Record<string, string>; icon?: Record<string, string>; card?: Record<string, string>; alert?: Record<string, string>; popover?: Record<string, string>; popconfirm?: Record<string, string>; drawer?: Record<string, string>; dropdown?: Record<string, string>; message?: Record<string, string>; notification?: Record<string, string>; loading?: Record<string, string>; timeline?: Record<string, string>; collapse?: Record<string, string>; rate?: Record<string, string>; segmented?: Record<string, string>; calendar?: Record<string, string>; affix?: Record<string, string>; backtop?: Record<string, string>; image?: Record<string, string>; menu?: Record<string, string>; table?: Record<string, string>; layout?: Record<string, string>; tree?: Record<string, string>; transfer?: Record<string, string>; upload?: Record<string, string>; anchor?: Record<string, string>; steps?: Record<string, string>; }	—

Slots

Slot	Description
default	Contenu des composants à configurer

Définitions de types

Les structures de types TypeScript exportées par ce composant sont présentées ci-dessous (extraction automatique à partir des sources packages/components/config-provider/src/types.ts et @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; la description des propriétés se trouve dans le tableau Props ci-dessus) :

LhThemeableComponent

/**
 * Ensemble des noms de composants configurables en thème
 */
export type LhThemeableComponent =
  | 'button'
  | 'input'
  | 'dialog'
  | 'tooltip'
  | 'icon'
  | 'card'
  | 'alert'
  | 'popover'
  | 'popconfirm'
  | 'drawer'
  | 'dropdown'
  | 'message'
  | 'notification'
  | 'loading'
  | 'timeline'
  | 'collapse'
  | 'rate'
  | 'segmented'
  | 'calendar'
  | 'affix'
  | 'backtop'
  | 'image'
  | 'menu'
  | 'table'
  | 'layout'
  | 'tree'
  | 'transfer'
  | 'upload'
  | 'anchor'
  | 'steps'

LhConfigProviderProps

/**
 * Options de configuration de ConfigProvider
 */
export interface LhConfigProviderProps {
  /** Taille globale */
  size?: LhSizes
  /** Langue globale */
  locale?: LocaleType
  /** Variables de thème globales
   * Clés prises en charge (préfixe --lh- ajouté automatiquement) :
   * - `primary-color`, `success-color`, `warning-color`, `danger-color`, `info-color`
   * - `gold-color`, `vermilion-color`, `jade-color`
   * - `bg-color`, `text-color`, `border-color`
   * - `bg-pattern` — URL du motif d'arrière-plan (par exemple `var(--lh-pattern-willow)`)
   * - `bg-pattern-opacity` — opacité du motif
   * - `bg-pattern-color` — couleur du motif
   * - `decoration-color` — couleur d'ornement */
  themeVars?: Record<string, string>
  /** Liste blanche des composants autorisés à utiliser les motifs d'arrière-plan
   * - seuls les composants de la liste blanche appliquent le bg-pattern des `themeVars` globales
   * - un tableau vide ou undefined désactive les motifs d'arrière-plan pour tous les composants
   * - les motifs transmis par un composant lui-même via `bgPattern` ou `themeVars` ne sont pas soumis à cette restriction
   */
  patternComponents?: LhThemeableComponent[]
  /** Configuration des variables de thème par composant (surcharge les themeVars globales)
   * La clé est le nom du composant, la valeur l'objet de ses variables de thème
   * Priorité : props du composant lui-même > componentTheme[nom du composant] > themeVars globales
   */
  componentTheme?: Partial<Record<LhThemeableComponent, Record<string, string>>>
}

ConfigProvider (configuration) ​

Utilisation de base ​

Couleur de thème personnalisée ​

Thème par composant (componentTheme) ​

Liste blanche des motifs d'arrière-plan (patternComponents) ​

Internationalisation ​

ConfigProvider API ​

Props ​

Slots ​

Définitions de types ​