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

الخصائص

الخاصية	الوصف	النوع	الافتراضي
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>; }	—

الفتحات

الفتحة	الوصف
default	محتوى المكوّنات المراد إعدادها

تعريفات الأنواع

بنى TypeScript التي يصدّرها هذا المكوّن خارجيًا (مستخرَجة تلقائيًا من packages/components/config-provider/src/types.ts و@lh-ui/share/core/*؛ انقر كل عنصر لعرض التعريف كاملًا؛ وصف الخصائص في جدول الخصائص أعلاه):

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>
  /** القائمة البيضاء للمكوّنات التي تُفعَّل لها خلفية النمط
   * - فقط المكوّنات داخل القائمة ستُطبَّق عليها bg-pattern من `themeVars` العامة
   * - مصفوفة فارغة أو undefined تعني تعطيل خلفية النمط لجميع المكوّنات
   * - الأنماط التي يمررها المكوّن نفسه عبر `bgPattern` أو `themeVars` لا تخضع لهذا القيد
   */
  patternComponents?: LhThemeableComponent[]
  /** إعداد متغيرات السمة حسب المكوّن بشكل منفرد (تجاوز `themeVars` العامة)
   * المفتاح هو اسم المكوّن والقيمة كائن متغيرات السمة الخاص به
   * الأولوية: خصائص المكوّن نفسه > componentTheme[اسم المكوّن] > `themeVars` العامة
   */
  componentTheme?: Partial<Record<LhThemeableComponent, Record<string, string>>>
}

ConfigProvider (إعداد) ​

الاستخدام الأساسي ​

لون سمة مخصص ​

إعداد السمة حسب المكوّن (componentTheme) ​

القائمة المسموح بها لخلفيات الأنماط (patternComponents) ​

التدويل ​

واجهة برمجة تطبيقات ConfigProvider ​

الخصائص ​

الفتحات ​

تعريفات الأنواع ​