ConfigProvider 設定

provide/inject によって子コンポーネントにグローバル設定を提供します。テーマ・サイズ・国際化を一元管理できます。

基本的な使い方

デフォルトサイズ：

スモールサイズ：

vue

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

<template>
  <!-- デフォルトサイズ -->
  <LhButton>デフォルトボタン</LhButton>
  <!-- メインボタン（無効） -->
  <LhButton type="primary" disabled>メインボタン</LhButton>
  <!-- スモールサイズ -->
  <LhConfigProvider :size="'small'">
    <!-- 小ボタン -->
    <LhButton>小ボタン</LhButton>
    <!-- 小メイン -->
    <LhButton type="primary">小メイン</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
}
</script>

<template>
  <!-- デフォルトサイズ -->
  <LhButton>デフォルトボタン</LhButton>
  <!-- メインボタン（無効） -->
  <LhButton type="primary" disabled>メインボタン</LhButton>
  <!-- スモールサイズ -->
  <LhConfigProvider :size="'small'">
    <!-- 小ボタン -->
    <LhButton>小ボタン</LhButton>
    <!-- 小メイン -->
    <LhButton type="primary">小メイン</LhButton>
  </LhConfigProvider>
</template>

カスタムテーマカラー

vue

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

<template>
  <LhConfigProvider :theme-vars="{ 'primary-color': '#e6a23c' }">
    <LhButton>デフォルト</LhButton>
    <LhButton type="primary">金色テーマ</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
}
</script>

<template>
  <LhConfigProvider :theme-vars="{ 'primary-color': '#e6a23c' }">
    <LhButton>デフォルト</LhButton>
    <LhButton type="primary">金色テーマ</LhButton>
  </LhConfigProvider>
</template>

コンポーネントごとのテーマ設定（componentTheme）

componentTheme を使うと特定のコンポーネントだけテーマ変数を個別に上書きできます。グローバルの themeVars より優先されます。

vue

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

<template>
  <LhConfigProvider
    :component-theme="{ button: { 'primary-color': '#e6a23c' } }"
  >
    <!-- Button 金黄テーマ -->
    <LhButton type="primary">Button 金黄テーマ</LhButton>
    <!-- Success は影響なし -->
    <LhButton type="success">Success は影響なし</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
}
</script>

<template>
  <LhConfigProvider
    :component-theme="{ button: { 'primary-color': '#e6a23c' } }"
  >
    <!-- Button 金黄テーマ -->
    <LhButton type="primary">Button 金黄テーマ</LhButton>
    <!-- Success は影響なし -->
    <LhButton type="success">Success は影響なし</LhButton>
  </LhConfigProvider>
</template>

紋様背景のホワイトリスト（patternComponents）

patternComponents で、紋様背景の効果をサポートするコンポーネントを指定します。

vue

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

<template>
  <LhConfigProvider :pattern-components="['button']">
    <LhButton bg-pattern="var(--lh-pattern-willow)">柳葉紋様</LhButton>
    <LhButton bg-pattern="var(--lh-pattern-cloud)">祥雲紋様</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
}
</script>

<template>
  <LhConfigProvider :pattern-components="['button']">
    <LhButton bg-pattern="var(--lh-pattern-willow)">柳葉紋様</LhButton>
    <LhButton bg-pattern="var(--lh-pattern-cloud)">祥雲紋様</LhButton>
  </LhConfigProvider>
</template>

bg-pattern の値は CSS 変数（例: var(--lh-pattern-willow)）または画像 URL です。紋様名（例: willow）を直接書くことはできません。その他の紋様名は紋様カスタマイズを参照してください。

国際化

locale でグローバル言語パックを設定します。

vue

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

const locale = ref('ja-JP')
const currentLocale = computed(() => locale.value === 'zh-CN' ? zhCN : enUS)
function toggleLocale() {
  locale.value = locale.value === 'zh-CN' ? 'en-US' : 'zh-CN'
}
</script>

<template>
  <LhConfigProvider :locale="currentLocale">
    <LhButton @click="toggleLocale">
      {{ locale === 'zh-CN' ? 'Switch to English' : '切换中文' }}
    </LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton, jaJP, enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
  data() {
    return { locale: 'ja-JP' }
  },
  computed: {
    currentLocale() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
  methods: {
    toggleLocale() {
      this.locale = this.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
    },
  },
}
</script>

<template>
  <LhConfigProvider :locale="currentLocale">
    <LhButton @click="toggleLocale">
      {{ locale === 'zh-CN' ? 'Switch to English' : '切换中文' }}
    </LhButton>
  </LhConfigProvider>
</template>

ConfigProvider API

Props

プロパティ名	説明	型	デフォルト値
size	グローバルサイズ	`LhSizes`	—
locale	国際化の設定	`LocaleType`	—
themeVars	グローバルテーマ変数	`{ [x: string]: string; }`	—
patternComponents	紋様背景のホワイトリスト	`[LhThemeableComponent](#type-LhThemeableComponent)`[]	—
componentTheme	コンポーネント名ごとのテーマ変数の設定	{ button?: Record<string, string>; input?: Record<string, string>; dialog?: Record<string, string>; tooltip?: Record<string, string>; icon?: Record<string, string>; card?: Record<string, string>; alert?: Record<string, string>; popover?: Record<string, string>; popconfirm?: Record<string, string>; drawer?: Record<string, string>; dropdown?: Record<string, string>; message?: Record<string, string>; notification?: Record<string, string>; loading?: Record<string, string>; timeline?: Record<string, string>; collapse?: Record<string, string>; rate?: Record<string, string>; segmented?: Record<string, string>; calendar?: Record<string, string>; affix?: Record<string, string>; backtop?: Record<string, string>; image?: Record<string, string>; menu?: Record<string, string>; table?: Record<string, string>; layout?: Record<string, string>; tree?: Record<string, string>; transfer?: Record<string, string>; upload?: Record<string, string>; anchor?: Record<string, string>; steps?: Record<string, string>; }	—

Slots

スロット名	説明
default	設定を適用するコンポーネントの内容

型定義

このコンポーネントが外部にエクスポートする TypeScript の型構造を以下に示します（packages/components/config-provider/src/types.ts および @lh-ui/share/core/* のソースから自動抽出。各エントリーをクリックすると完全な定義が表示されます。プロパティの説明は上の Props 表を参照してください）：

LhThemeableComponent

/**
 * テーマ設定が可能なコンポーネント名の集合
 */
export type LhThemeableComponent =
  | 'button'
  | 'input'
  | 'dialog'
  | 'tooltip'
  | 'icon'
  | 'card'
  | 'alert'
  | 'popover'
  | 'popconfirm'
  | 'drawer'
  | 'dropdown'
  | 'message'
  | 'notification'
  | 'loading'
  | 'timeline'
  | 'collapse'
  | 'rate'
  | 'segmented'
  | 'calendar'
  | 'affix'
  | 'backtop'
  | 'image'
  | 'menu'
  | 'table'
  | 'layout'
  | 'tree'
  | 'transfer'
  | 'upload'
  | 'anchor'
  | 'steps'

LhConfigProviderProps

/**
 * ConfigProvider の設定項目
 */
export interface LhConfigProviderProps {
  /** グローバルサイズ */
  size?: LhSizes
  /** グローバル言語 */
  locale?: LocaleType
  /** グローバルテーマ変数
   * サポートするキー（自動的に --lh- プレフィックスが付きます）：
   * - `primary-color`, `success-color`, `warning-color`, `danger-color`, `info-color`
   * - `gold-color`, `vermilion-color`, `jade-color`
   * - `bg-color`, `text-color`, `border-color`
   * - `bg-pattern` — 紋様背景の URL（例: `var(--lh-pattern-willow)`）
   * - `bg-pattern-opacity` — 紋様の不透明度
   * - `bg-pattern-color` — 紋様の色
   * - `decoration-color` — 装飾色 */
  themeVars?: Record<string, string>
  /** 背景紋様を有効にするコンポーネントのホワイトリスト
   * - ホワイトリストに含まれるコンポーネントのみ、グローバル `themeVars` の bg-pattern が適用されます
   * - 空配列または undefined の場合、すべてのコンポーネントで背景紋様が無効になります
   * - コンポーネント自身が `bgPattern` や `themeVars` で渡した紋様はこの制限を受けません
   */
  patternComponents?: LhThemeableComponent[]
  /** コンポーネントごとにテーマ変数を個別に設定します（グローバル themeVars を上書きします）
   * キーはコンポーネント名、値はそのコンポーネントのテーマ変数オブジェクトです
   * 優先順位: コンポーネント自身の props > componentTheme[コンポーネント名] > グローバル themeVars
   */
  componentTheme?: Partial<Record<LhThemeableComponent, Record<string, string>>>
}

ConfigProvider 設定 ​

基本的な使い方 ​

カスタムテーマカラー ​

コンポーネントごとのテーマ設定（componentTheme） ​

紋様背景のホワイトリスト（patternComponents） ​

国際化 ​

ConfigProvider API ​

Props ​

Slots ​

型定義 ​