Système de fonds à motifs

lh-ui-plus fournit un système de fonds à motifs poétiques au style chinois, prenant en charge 6 motifs prédéfinis, applicables via une variable CSS (bg-pattern) ou via la prop bgPattern du composant. La bascule entre le mode clair et le mode sombre est une autre capacité indépendante, voir « Mode clair et sombre » en fin de page.

Motifs prédéfinis

Le système intègre les 6 motifs suivants :

Motif	Variable CSS	Description
Aucun	--lh-pattern-none	Aucun motif par défaut
Feuille de saule	--lh-pattern-willow	Feuilles de saule allongées, espacement régulier
Nuage de bon présage	--lh-pattern-cloud	Nuages qui se déploient en ondulant
Onde d'eau	--lh-pattern-water	De légers remous en couches successives
Flocon de neige	--lh-pattern-snow	Flocons hexagonaux aux fines branches
Fleur de prunier	--lh-pattern-plum	Cinq pétales ouverts, cœur bien marqué
Feuille de bambou	--lh-pattern-bamboo	Feuilles de bambou lancéolées, disposées avec rythme

Modes d'utilisation

Configuration globale via ConfigProvider

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

Contrôler la portée des motifs (liste blanche patternComponents)

Par défaut, le bg-pattern global ne s'applique à aucun composant : il faut l'activer explicitement via la liste blanche 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']"
  >
    <!-- Le bouton et le champ appliquent le motif, pas la boîte de dialogue -->
    <LhButton>Bouton avec motif</LhButton>
    <LhInput placeholder="Champ avec motif" />
    <LhDialog v-model="visible">Cette boîte de dialogue n'a pas de motif</LhDialog>
  </LhConfigProvider>
</template>

Configuration des motifs au niveau du composant

Les motifs définis par le composant lui-même via la prop bgPattern ou themeVars ne sont pas soumis à la liste blanche :

<template>
  <LhButton :bg-pattern="'var(--lh-pattern-bamboo)'">
    Ce bouton a toujours un motif
  </LhButton>
</template>

Transparence de motif personnalisée

<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>Opacité personnalisée</LhButton>
  </LhConfigProvider>
</template>

Référence des variables CSS

Nom de la variable	Description	Valeur par défaut
--lh-bg-pattern	URL du fond à motifs	none
--lh-bg-pattern-repeat	Mode de répétition du motif	repeat
--lh-bg-pattern-size	Taille du motif	40px
--lh-bg-pattern-opacity	Opacité du motif	0.15
--lh-bg-pattern-color	Couleur du motif	var(--lh-decoration-color, rgba(184, 134, 11, 0.12))
--lh-bg-pattern-blend	Mode de fusion du motif	soft-light

Mode clair et sombre

Le système de motifs est lui-même contrôlé par des variables CSS et n'interfère pas avec le mode clair et sombre. La bascule se fait via la fonction composable useLhTheme (qui écrit l'attribut data-theme) :

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

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

// Basculer entre le mode clair et le mode sombre
function onToggle() {
  toggleTheme()
}
</script>

<template>
  <div>
    <LhButton @click="onToggle">
      {{ theme === 'dark' ? 'Passer en mode clair' : 'Passer en mode sombre' }}
    </LhButton>
  </div>
</template>

Priorité des variables de thème

Les variables CSS finales du composant sont fusionnées selon la priorité suivante (les suivantes couvrent les précédentes) :

1. themeVars global du ConfigProvider (priorité la plus basse)
2. componentTheme[nom du composant] par composant du ConfigProvider
3. Prop themeVars du composant lui-même
4. Prop bgPattern du composant lui-même (priorité la plus haute)

Pour la variable bg-pattern, la liste blanche patternComponents s'applique en outre : seuls les composants de la liste blanche appliquent le bg-pattern de la configuration globale.