ConfigProvider 設定

サブツリーに対してグローバルなサイズ、言語、テーマ変数を提供します。provide されるのは computed 参照（スナップショットではない）で、provider の prop の変化がすべての消費コンポーネントへリアルタイムに伝わります。

部分的なテーマカスタマイズ

<template>
  <div class="demo-col" style="gap: 20px">
    <LhConfigProvider
      :theme-vars="{
        'primary-color': '#4a6741',
        'bg-color': '#f4f7ee',
        'text-primary': '#2c2a26',
        'text-regular': '#5a5a5a',
      }"
      :pattern-components="['button', 'tag']"
    >
      <div
        style="
          padding: 16px;
          background: var(--lh-bg-color);
          border: 1px dashed var(--lh-primary-color);
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
        "
      >
        <LhButton type="primary">竹青テーマボタン</LhButton>
        <LhTag type="primary">竹青タグ</LhTag>
        <LhInput placeholder="竹青入力フィールド" style="width: 180px" />
      </div>
    </LhConfigProvider>
    <p class="demo-note">themeVars がグローバルの --lh-* 変数を上書きします。bg-pattern が適用されるのは patternComponents ホワイトリスト内のコンポーネントだけです。</p>
    <LhConfigProvider
      :theme-vars="{ 'primary-color': '#8b5a2b' }"
      :component-theme="{ button: { 'primary-color': '#2f6f5e' }, tag: { 'primary-color': '#2f6f5e' } }"
    >
      <div style="padding: 16px; display: flex; gap: 12px; flex-wrap: wrap">
        <LhButton type="primary">松绿ボタン（componentTheme で個別に上書き）</LhButton>
        <LhTag type="primary">松绿タグ</LhTag>
      </div>
    </LhConfigProvider>
    <p class="demo-note">componentTheme はコンポーネントごとに個別に上書きします（グローバルの themeVars より優先されます）。</p>
    <LhConfigProvider size="large" locale="en-US">
      <div style="padding: 16px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center">
        <LhInput placeholder="size=large" style="width: 180px" />
        <LhPagination :total="50" :page-size="10" />
      </div>
    </LhConfigProvider>
    <p class="demo-note">size のグローバルサイズ + locale で言語パッケージを切り替えます（ページネーションのテキストが英語になります）。</p>
  </div>
</template>

Props

プロパティ	説明	型	デフォルト値
size	グローバルサイズ（子コンポーネントが size を明示的に渡さない場合に有効）	LhSizes	—
locale	グローバル言語（watch immediate で lhlocale シングルトンと同期）	LhLocaleType	—
themeVars	グローバルテーマ変数（キーは --lh- 接頭辞を省略可能）	Record<string, string>	—
patternComponents	bg-pattern が有効なホワイトリスト	LhThemeableComponent[]	—
componentTheme	コンポーネントごとのテーマ変数の上書き	Partial<Record<Component, Vars>>	—

Composition API

import { useLhConfigContext } from '@lh-ui/vue2'
// カスタムコンポーネント内への注入：ComputedRef<LhConfigContext> | null を返す
const ctx = useLhConfigContext()

警告

命令的サービス（new Vue によるマウント）は provide/inject のコンテキストを引き継ぎません。グローバルの size/locale は lhlocale シングルトン経由で読み取ります。