Частые вопросы

Установка и настройка

Как установить @lh-ui/vue3?

pnpm add @lh-ui/vue3

Как импортировать компоненты?

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

app.use(LhUiPlus)

Как импортировать по требованию?

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

Настройка темы

Как задать собственные цвета темы?

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

Как использовать тёмную тему?

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

useLhTheme возвращает { theme, setTheme, toggleTheme }: theme — текущий режим (light / dark), toggleTheme переключает его, setTheme задаёт напрямую.

Как переключить предустановленную тему?

Используйте useLhPresetTheme:

import { useLhPresetTheme } from '@lh-ui/vue3'
const { preset, setPreset, presets } = useLhPresetTheme()
setPreset('songhua') // переключает на сосново-зелёный, записывает в :root и сохраняет

Передайте applyToRoot: false, чтобы получить только возвращаемые themeVars и передать их в LhConfigProvider для локальной области действия. Подробнее см. Предустановленные темы.

Локализация

Как переключить язык?

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

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

Языковые пакеты импортируются поименованными экспортами из корня пакета (zhCN / enUS).

Как добавить новый язык?

Исходники языковых пакетов находятся в общем слое @lh-ui/share (@lh-ui/share/locales/lang/); этот репозиторий их больше не хранит. Регистрация нового языка во время выполнения: lhlocale.use({ locale: 'xx-XX', messages }), lhlocale экспортируется из @lh-ui/vue3.

Использование компонентов

Как пользоваться быстрой раскладкой sx?

<LhButton :sx="{ mt: 2, px: 4 }">Кнопка</LhButton>

sx поддерживает только свойства раскладки (размеры w / h, отступы m* / p*, flex-свойства display / flex и т. д.); цветами управляйте через type или переменные темы.

Как включить узорный фон?

<LhConfigProvider :pattern-components="['button', 'dialog']">
  <LhButton bg-pattern="var(--lh-pattern-willow)">Кнопка с узором</LhButton>
</LhConfigProvider>

patternComponents принимает названия компонентов в нижнем регистре ('button' / 'dialog' и т. д., без префикса Lh); значением bg-pattern служит CSS-переменная (например var(--lh-pattern-willow)) или URL изображения. Подробнее см. Система узорных фонов.

Разработка

Как внести вклад в код?

См. Руководство по участию.

Разработка с помощью ИИ

Проект поддерживается с помощью AI-агентов. Все команды проверки запускаются пользователями вручную.