ConfigProvider (configuración)

Proporciona configuración global a los componentes descendientes mediante provide/inject; admite la gestión unificada de tema, tamaño e internacionalización.

Uso básico

Tamaño predeterminado:

Tamaño pequeño:

vue

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

<template>
  <!-- Tamaño predeterminado -->
  <LhButton>Predeterminado</LhButton>
  <!-- Botón principal (deshabilitado) -->
  <LhButton type="primary" disabled>Principal</LhButton>
  <!-- Tamaño pequeño -->
  <LhConfigProvider :size="'small'">
    <!-- Botón pequeño -->
    <LhButton>Botón pequeño</LhButton>
    <!-- Principal pequeño -->
    <LhButton type="primary">Principal pequeño</LhButton>
  </LhConfigProvider>
</template>

vue

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

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

<template>
  <!-- Tamaño predeterminado -->
  <LhButton>Predeterminado</LhButton>
  <!-- Botón principal (deshabilitado) -->
  <LhButton type="primary" disabled>Principal</LhButton>
  <!-- Tamaño pequeño -->
  <LhConfigProvider :size="'small'">
    <!-- Botón pequeño -->
    <LhButton>Botón pequeño</LhButton>
    <!-- Principal pequeño -->
    <LhButton type="primary">Principal pequeño</LhButton>
  </LhConfigProvider>
</template>

Color de tema personalizado

vue

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

<template>
  <LhConfigProvider :theme-vars="{ 'primary-color': '#e6a23c' }">
    <LhButton>Predeterminado</LhButton>
    <LhButton type="primary">Tema dorado</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>Predeterminado</LhButton>
    <LhButton type="primary">Tema dorado</LhButton>
  </LhConfigProvider>
</template>

Tema por componente (componentTheme)

Con componentTheme se pueden sobrescribir las variables de tema de un componente concreto; su prioridad es mayor que la de themeVars global.

vue

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

<template>
  <LhConfigProvider
    :component-theme="{ button: { 'primary-color': '#e6a23c' } }"
  >
    <!-- Button con tema dorado -->
    <LhButton type="primary">Button con tema dorado</LhButton>
    <!-- Success no se ve afectado -->
    <LhButton type="success">Success no se ve afectado</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 con tema dorado -->
    <LhButton type="primary">Button con tema dorado</LhButton>
    <!-- Success no se ve afectado -->
    <LhButton type="success">Success no se ve afectado</LhButton>
  </LhConfigProvider>
</template>

Lista blanca de patrones de fondo (patternComponents)

Con patternComponents se especifica qué componentes admiten el efecto de patrón de fondo.

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)">Patrón de hojas de sauce</LhButton>
    <LhButton bg-pattern="var(--lh-pattern-cloud)">Patrón de nubes auspiciosas</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)">Patrón de hojas de sauce</LhButton>
    <LhButton bg-pattern="var(--lh-pattern-cloud)">Patrón de nubes auspiciosas</LhButton>
  </LhConfigProvider>
</template>

El valor de bg-pattern es una variable CSS (p. ej. var(--lh-pattern-willow)) o una URL de imagen; escribir directamente el nombre del patrón (p. ej. willow) no funciona. Para ver más nombres de patrones, consulta Personalización de patrones.

Internacionalización

Con locale se configura el paquete de idioma global.

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

Prop	Descripción	Tipo	Predeterminado
size	Tamaño global	`LhSizes`	—
locale	Configuración de internacionalización	`LocaleType`	—
themeVars	Variables de tema globales	`{ [x: string]: string; }`	—
patternComponents	Lista blanca de patrones de fondo	`[LhThemeableComponent](#type-LhThemeableComponent)`[]	—
componentTheme	Variables de tema por nombre de componente	{ 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	Descripción
default	Contenido de los componentes que se desea configurar

Definiciones de tipos

Las estructuras de tipos TypeScript exportadas por este componente (extraídas automáticamente de packages/components/config-provider/src/types.ts y de las fuentes @lh-ui/share/core/*; abre cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhThemeableComponent

/**
 * Conjunto de nombres de componentes configurables por tema
 */
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

/**
 * Opciones de configuración de ConfigProvider
 */
export interface LhConfigProviderProps {
  /** Tamaño global */
  size?: LhSizes
  /** Idioma global */
  locale?: LocaleType
  /** Variables de tema globales
   * Claves admitidas (reciben automáticamente el prefijo --lh-):
   * - `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 del patrón de fondo (p. ej. `var(--lh-pattern-willow)`)
   * - `bg-pattern-opacity` — opacidad del patrón
   * - `bg-pattern-color` — color del patrón
   * - `decoration-color` — color decorativo */
  themeVars?: Record<string, string>
  /** Lista blanca de componentes con patrón de fondo activado
   * - Solo los componentes de la lista blanca aplican el bg-pattern de las `themeVars` globales
   * - Una matriz vacía o undefined desactiva el patrón de fondo en todos los componentes
   * - Los patrones pasados por el propio componente mediante `bgPattern` o `themeVars` no están sujetos a esta restricción
   */
  patternComponents?: LhThemeableComponent[]
  /** Variables de tema configuradas por componente (sobrescriben las themeVars globales)
   * La clave es el nombre del componente y el valor, su objeto de variables de tema
   * Prioridad: props del propio componente > componentTheme[componente] > themeVars globales
   */
  componentTheme?: Partial<Record<LhThemeableComponent, Record<string, string>>>
}

ConfigProvider (configuración) ​

Uso básico ​

Color de tema personalizado ​

Tema por componente (componentTheme) ​

Lista blanca de patrones de fondo (patternComponents) ​

Internacionalización ​

ConfigProvider API ​

Props ​

Slots ​

Definiciones de tipos ​