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-* 변수를 덮어씁니다. patternComponents 화이트리스트 내 컴포넌트에만 bg-pattern이 적용됩니다.</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>>	—

컴포지션 API

import { useLhConfigContext } from '@lh-ui/vue2'
// 사용자 정의 컴포넌트 내 주입: ComputedRef<LhConfigContext> | null 반환
const ctx = useLhConfigContext()

경고

명령형 서비스 (new Vue 마운트) 는 provide/inject 컨텍스트를 상속하지 않으며, 전역 size/locale은 lhlocale 싱글톤을 통해 읽습니다.