よくある質問

インストールと設定

@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 の支援を受けてコードをメンテナンスしています。すべての検証コマンドはユーザーが手動で実行します。