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, zhCN, enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
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, zhCN, enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
  data() {
    return { locale: 'zh-CN' }
  },
  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 ​

타입 정의 ​