Reka UI logoReka UI 中文文档
backdrop
Examples
工具

配置提供者

封装您的应用以提供全局配置。
  • 使所有基础组件能够继承全局阅读方向。
  • 允许在设置 body lock 时更改滚动容器行为。
  • 更多防止布局偏移的控制选项。

结构

导入组件。

vue
<script setup lang="ts">
import { ConfigProvider } from 'reka-ui'
</script>

<template>
  <ConfigProvider>
    <slot />
  </ConfigProvider>
</template>

API 参考

配置提供者

当创建需要从右到左 (RTL) 阅读方向的本地化应用时，您需要使用 ConfigProvider 组件包装您的应用程序，以确保所有基础组件都能根据 dir 属性调整其行为。

您还可以更改 Alert、DropdownMenu 等组件的 bodylock 全局行为，以适应您的布局，防止任何内容偏移。

PropDefaultType
dir
'ltr'
'ltr' | 'rtl'

The global reading direction of your application. This will be inherited by all primitives.

locale
'en'
string

The global locale of your application. This will be inherited by all primitives.

nonce
string

The global nonce value of your application. This will be inherited by the related primitives.

scrollBody
true
boolean | ScrollBodyOption

The global scroll body behavior of your application. This will be inherited by the related primitives.

useId
(() => string)

The global useId injection as a workaround for preventing hydration issue.

MethodsType
useId
() => string

The global useId injection as a workaround for preventing hydration issue.

示例

使用配置提供者。

设置全局方向为 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
<!-- Nuxt 的 app.vue 文件中 -->
<script setup lang="ts">
import { ConfigProvider } from 'reka-ui'

const useIdFunction = () => useId()
</script>

<template>
   <ConfigProvider :use-id="useIdFunction">
     …
   </ConfigProvider>
</template>