Sistema de fondos con patrones

lh-ui-plus ofrece un sistema de fondos con patrones de poética china, con 6 patrones predefinidos, que se aplican a través de variables CSS (bg-pattern) o de la propiedad bgPattern de los componentes. La conmutación entre modo claro y oscuro es una capacidad independiente, que se explica en la sección «Modo claro/oscuro» al final de la página.

Patrones predefinidos

El sistema incorpora los siguientes 6 patrones:

Patrón	Variable CSS	Descripción
Ninguno	--lh-pattern-none	Sin patrón (predeterminado)
柳叶 (hoja de sauce)	--lh-pattern-willow	Hojas de sauce alargadas, con densidad bien compuesta
祥云 (nube propicia)	--lh-pattern-cloud	Nubes propicias que se despliegan, serpenteando
水波 (ondas de agua)	--lh-pattern-water	Ondulaciones tenues, en capas superpuestas
雪花 (copo de nieve)	--lh-pattern-snow	Copos hexagonales, con ramificaciones finas
梅花 (flor de ciruelo)	--lh-pattern-plum	Cinco pétalos desplegados, con el centro bien definido
竹叶 (hoja de bambú)	--lh-pattern-bamboo	Hojas de bambú lanceoladas, dispuestas con armonía

Formas de uso

Configuración global mediante ConfigProvider

<template>
  <LhConfigProvider :theme-vars="{ 'bg-pattern': 'var(--lh-pattern-willow)' }">
    <LhButton>Predeterminado</LhButton>
    <LhButton type="primary">Principal</LhButton>
  </LhConfigProvider>
</template>

Control del ámbito de aplicación del patrón (lista blanca patternComponents)

De forma predeterminada, el bg-pattern global no se aplica a ningún componente; es necesario habilitarlo explícitamente a través de la lista blanca patternComponents:

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <LhConfigProvider
    :theme-vars="{ 'bg-pattern': 'var(--lh-pattern-cloud)' }"
    :pattern-components="['button', 'input']"
  >
    <!-- El botón y el campo aplican el patrón; Dialog no -->
    <LhButton>Botón con patrón</LhButton>
    <LhInput placeholder="Campo con patrón" />
    <LhDialog v-model="visible">Este diálogo no tiene patrón</LhDialog>
  </LhConfigProvider>
</template>

Configuración del patrón a nivel de componente

El patrón establecido por el propio componente a través de la propiedad bgPattern o de themeVars no está sujeto a la lista blanca:

<template>
  <LhButton :bg-pattern="'var(--lh-pattern-bamboo)'">
    Este botón siempre tiene patrón
  </LhButton>
</template>

Personalización de la opacidad del patrón

<template>
  <LhConfigProvider
    :theme-vars="{
      'bg-pattern': 'var(--lh-pattern-snow)',
      'bg-pattern-opacity': '0.3',
      'bg-pattern-color': 'rgba(255, 0, 0, 0.2)',
    }"
  >
    <LhButton>Opacidad personalizada</LhButton>
  </LhConfigProvider>
</template>

Referencia de variables CSS

Variable	Descripción	Predeterminado
--lh-bg-pattern	URL del patrón de fondo	none
--lh-bg-pattern-repeat	Modo de repetición en mosaico	repeat
--lh-bg-pattern-size	Tamaño del patrón	40px
--lh-bg-pattern-opacity	Opacidad del patrón	0.15
--lh-bg-pattern-color	Color del patrón	var(--lh-decoration-color, rgba(184, 134, 11, 0.12))
--lh-bg-pattern-blend	Modo de mezcla del patrón	soft-light

Modo claro/oscuro

El sistema de patrones se controla mediante variables CSS y no interactúa con el modo claro/oscuro. La conmutación entre ambos modos se realiza con el composable useLhTheme (que escribe en el atributo data-theme):

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

const { theme, toggleTheme, setTheme } = useLhTheme()

// Conmutar entre tema claro y oscuro
function onToggle() {
  toggleTheme()
}
</script>

<template>
  <div>
    <LhButton @click="onToggle">
      {{ theme === 'dark' ? 'Cambiar a claro' : 'Cambiar a oscuro' }}
    </LhButton>
  </div>
</template>

Prioridad de las variables de tema

Las variables CSS finales de un componente se fusionan según la siguiente prioridad (cada nivel sobrescribe al anterior):

1. themeVars global de ConfigProvider (prioridad más baja)
2. componentTheme[nombre del componente] de ConfigProvider
3. La prop themeVars del propio componente
4. La prop bgPattern del propio componente (prioridad más alta)

Para la variable bg-pattern existe además el control de la lista blanca patternComponents: solo los componentes de la lista blanca aplican el bg-pattern de la configuración global.