Config Provider 全局配置
YhConfigProvider 为组件库提供全局配置,包括主题配色、国际化语言、组件尺寸等。
主题切换
通过 theme 属性可以动态切换配色。直接传入十六进制色值可实现精准的主题色覆盖。
主题切换
全局组件尺寸
配置 size 后,内部所有的 YH-UI 组件将自动应用该尺寸。
全局尺寸
完整配置示例
演示如何同时联动配置主题、语言和尺寸,构建局部的定制化 UI 环境。
提示Active
完整配置
在 Nuxt 中使用
接入 @yh-ui/nuxt 后,可直接在页面或局部作用域中使用 YhConfigProvider。主题样式会通过 CSS 变量注入当前作用域或 :root,语言、尺寸、消息配置则通过上下文向下传递。
API
Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| theme | 全局主题 | string | 十六进制色值 / purple | default |
| locale | 国际化语言包 | Language | — | zhCn |
| size | 全局组件尺寸 | 'large' | 'default' | 'small' | — | 'default' |
| global | 是否注入到 :root | boolean | — | true |
Events
当前组件未暴露组件事件。
Slots
| 插槽名 | 说明 | 插槽参数 |
|---|---|---|
default | Provider 作用域内的内容。 | 无 |
Expose
当前组件未暴露公开实例方法或属性。
主题变量
当前组件不提供组件级 themeOverrides。主题、语言、尺寸和消息等能力通过上下文配置向子组件传递。
类型导出
| 名称 | 说明 |
|---|---|
YhConfigProviderProps | YhConfigProvider props 类型 |
YhConfigProviderSlots | YhConfigProvider slots 类型 |
YhConfigProviderInstance | YhConfigProvider 实例类型 |
ConfigProviderContext | Provider 上下文类型 |