ConfigProvider (إعداد عام)

يوفّر إعدادات عامة موحّدة للمكوّنات (الحجم، اللغة، متغيرات السمة، القائمة البيضاء لخلفيات النمط).

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

الحجم العام ومتغيرات السمة

import { LhConfigProvider, LhButton } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <LhConfigProvider size="large" themeVars={{ 'primary-color': '#722ed1' }}>
        <LhButton type="primary">حجم large عام + لون أساسي مخصص</LhButton>
      </LhConfigProvider>

      <LhConfigProvider size="small">
        <LhButton type="primary">حجم small عام</LhButton>
      </LhConfigProvider>
    </>
  )
}

الخصائص

خاصية	الوصف	النوع	الافتراضي
size	الحجم العام	`'large' \| 'middle' \| 'small'`	—
locale	اللغة العامة	`LhComponentLanguage`	`'zh-CN'`
themeVars	متغيرات السمة العامة (المفاتيح دون بادئة `--lh-`)	`Record<string, string>`	—
patternComponents	القائمة البيضاء للمكوّنات التي تُفعّل خلفية النمط	`LhThemeableComponent[]`	—
componentTheme	إعداد متغيرات السمة لكل مكوّن على حدة	`Partial<Record<LhThemeableComponent, Record<string, string>>>`	—

أولوية متغيرات السمة

خصائص المكوّن نفسه > componentTheme[اسم المكوّن] > themeVars العامة

مفاتيح themeVars المتاحة

مفتاح	الوصف
`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`	لون الزخرفة

للاطلاع على التخصيص الكامل للسمات راجع تخصيص السمات.

القراءة داخل المكوّن

import { useLhConfigContext } from '@lh-ui/react'

function Probe() {
  const { size, locale } = useLhConfigContext()
  return <span>{size} / {locale}</span>
}

قيمة احتياطية في جهة الاستهلاك

عند عدم التغليف بـ LhConfigProvider، تُرجع useLhConfigContext() كائنًا احتياطيًا حقوله كلها undefined (وليس null)، فلا حاجة لفحص القيمة الفارغة داخل المكوّن. هذا اختلاف مقصود عن plus.

الأنماط

import '@lh-ui/react/style/config-provider'

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

الخصائص​

أولوية متغيرات السمة​

مفاتيح themeVars المتاحة​

القراءة داخل المكوّن​

الأنماط​