FAQ

Installation et configuration

Comment installer @lh-ui/vue3 ?

pnpm add @lh-ui/vue3

Comment importer des composants ?

import LhUiPlus from '@lh-ui/vue3'
import '@lh-ui/vue3/dist/index.css'

app.use(LhUiPlus)

Comment importer à la demande ?

import { LhButton, LhInput } from '@lh-ui/vue3'

Personnalisation du thème

Comment personnaliser la couleur du thème ?

<LhConfigProvider :theme-vars="{ 'primary-color': '#e63946' }">
  <App />
</LhConfigProvider>

Comment utiliser le mode sombre ?

import { useLhTheme } from '@lh-ui/vue3'
const { theme, toggleTheme } = useLhTheme()

useLhTheme renvoie { theme, setTheme, toggleTheme } : theme est le mode clair/sombre courant (light / dark), toggleTheme bascule entre les deux, setTheme définit directement la valeur.

Comment changer de thème prédéfini ?

Utilisez useLhPresetTheme :

import { useLhPresetTheme } from '@lh-ui/vue3'
const { preset, setPreset, presets } = useLhPresetTheme()
setPreset('songhua') // Bascule sur le préréglage vert pin, écrit dans :root et persisté

Passez applyToRoot: false pour ne récupérer que les themeVars renvoyés et les confier à LhConfigProvider pour une portée locale. Voir Thèmes prédéfinis.

Internationalisation

Comment changer de langue ?

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

<template>
  <LhConfigProvider :locale="enUS">
    <App />
  </LhConfigProvider>
</template>

Les paquets linguistiques sont importés nommément depuis la racine du paquet (zhCN / enUS).

Comment ajouter une nouvelle langue ?

Le code source des paquets linguistiques se trouve dans la couche partagée @lh-ui/share (@lh-ui/share/locales/lang/), ce dépôt n'en conserve aucune copie. Pour enregistrer une nouvelle langue à l'exécution : lhlocale.use({ locale: 'xx-XX', messages }), lhlocale étant exporté par @lh-ui/vue3.

Utilisation des composants

Comment utiliser la mise en page sx ?

<LhButton :sx="{ mt: 2, px: 4 }">Bouton</LhButton>

sx ne prend en charge que les propriétés de mise en page (dimensions w / h, espacements m* / p*, disposition flexible display / flex, etc.) ; pour les couleurs, utilisez type ou les variables de thème.

Comment activer les fonds à motifs ?

<LhConfigProvider :pattern-components="['button', 'dialog']">
  <LhButton bg-pattern="var(--lh-pattern-willow)">Bouton avec motif</LhButton>
</LhConfigProvider>

patternComponents reçoit des noms de composants en minuscules ('button' / 'dialog', etc., sans le préfixe Lh) ; la valeur de bg-pattern est une variable CSS (par ex. var(--lh-pattern-willow)) ou une URL d'image. Voir Système de fonds à motifs.

Développement

Comment contribuer au code ?

Voir Contribution.

Développement assisté par IA

Le projet est maintenu avec l'assistance d'agents IA. Toutes les commandes de vérification sont exécutées manuellement par l'utilisateur.