Config Provider
包裹您的应用以提供全局配置。
- 使所有基本组件能够继承全局阅读方向。
- 启用在设置主体锁定 (body lock) 时更改滚动主体行为。
- 更多控制以防止布局偏移。
解构
导入组件。
vue
<script setup lang="ts">
import { ConfigProvider } from 'reka-ui'
</script>
<template>
<ConfigProvider>
<slot />
</ConfigProvider>
</template>API 参考
Config Provider
当创建需要从右到左 (RTL) 阅读方向的本地化应用时，您需要使用 ConfigProvider 组件包裹您的应用程序，以确保所有基本组件根据 dir prop 调整其行为。
您还可以更改 Alert、DropdownMenu 等组件的 bodylock 的全局行为，以适应您的布局，防止任何 内容偏移。
| 属性 | 默认 | 类型 |
|---|---|---|
dir | 'ltr' | 'ltr' | 'rtl'您应用的全局阅读方向。所有基本组件都将继承此方向。 |
locale | 'en' | string您应用的全局语言环境。所有基本组件都将继承此语言环境。 |
nonce | string您应用的全局 | |
scrollBody | true | boolean | ScrollBodyOption您应用的全局滚动主体行为。相关基本组件将继承此行为。 |
useId | (() => string)作为一种临时解决方案，用于防止水合问题，全局 |
| 方法 | 类型 |
|---|---|
useId | () => string作为一种临时解决方案，用于防止水合问题，全局 |
示例
使用配置提供器。
将全局方向设置为 rtl，并将滚动主体行为设置为 false（将不设置任何内边距/外边距）。
vue
<script setup lang="ts">
import { ConfigProvider } from 'reka-ui'
</script>
<template>
<ConfigProvider
dir="rtl"
:scroll-body="false"
>
<slot />
</ConfigProvider>
</template>水合问题 (Vue < 3.5)
我们提供一个临时解决方案，允许当前的 Nuxt（版本 >3.10）项目通过使用 Nuxt 提供的 useId 来解决当前的水合问题。
灵感来自 Headless UI
vue
<!-- in Nuxt's app.vue -->
<script setup lang="ts">
import { ConfigProvider } from 'reka-ui'
const useIdFunction = () => useId()
</script>
<template>
<ConfigProvider :use-id="useIdFunction">
…
</ConfigProvider>
</template>