Preguntas frecuentes

Instalación y configuración

¿Cómo instalar @lh-ui/vue3?

pnpm add @lh-ui/vue3

¿Cómo importar los componentes?

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

app.use(LhUiPlus)

¿Cómo importar a demanda?

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

Personalización de temas

¿Cómo personalizar el color del tema?

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

¿Cómo usar el modo oscuro?

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

useLhTheme devuelve { theme, setTheme, toggleTheme }: theme es el modo claro/oscuro actual (light / dark), toggleTheme lo conmuta y setTheme lo establece directamente.

¿Cómo cambiar de preset de tema?

Con useLhPresetTheme:

import { useLhPresetTheme } from '@lh-ui/vue3'
const { preset, setPreset, presets } = useLhPresetTheme()
setPreset('songhua') // cambia al preset verde pino, escribe en :root y lo persiste

Si se pasa applyToRoot: false se puede tomar solo el themeVars devuelto y entregárselo a LhConfigProvider para un alcance local. Consulta Temas predefinidos para más detalles.

Internacionalización

¿Cómo cambiar de idioma?

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

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

Los paquetes de idioma se importan por nombre desde la ruta raíz del paquete (zhCN / enUS).

¿Cómo añadir un idioma nuevo?

El código fuente de los paquetes de idioma se encuentra en la capa compartida @lh-ui/share (@lh-ui/share/locales/lang/); este repositorio ya no los contiene. Para registrar un idioma nuevo en tiempo de ejecución: lhlocale.use({ locale: 'xx-XX', messages }), donde lhlocale se exporta desde @lh-ui/vue3.

Uso de componentes

¿Cómo se usa el diseño rápido con sx?

<LhButton :sx="{ mt: 2, px: 4 }">Botón</LhButton>

sx solo admite propiedades de tipo layout (ancho/alto w / h, márgenes m* / rellenos p*, diseño flexible display / flex, etc.); para los colores utiliza type o las variables de tema.

¿Cómo se activan los fondos con patrón?

<LhConfigProvider :pattern-components="['button', 'dialog']">
  <LhButton bg-pattern="var(--lh-pattern-willow)">Botón con patrón</LhButton>
</LhConfigProvider>

patternComponents recibe nombres de componentes en minúsculas ('button' / 'dialog', etc., sin el prefijo Lh); el valor de bg-pattern es una variable CSS (como var(--lh-pattern-willow)) o una URL de imagen. Consulta Sistema de fondos con patrones para más detalles.

Desarrollo

¿Cómo contribuir con código?

Consulta la Guía de contribución.

Desarrollo asistido por IA

El proyecto se mantiene con la asistencia de agents de IA. Todos los comandos de verificación los ejecuta manualmente el usuario.