자주 묻는 질문

설치와 구성

@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*, 플렉스 레이아웃 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 보조 개발

이 프로젝트는 AI agent의 보조를 받아 코드를 유지 관리합니다. 모든 검증 명령은 사용자가 수동으로 실행합니다.