Lzh on GitHub

配置提供器 (Config Provider)

包装您的应用程序以提供全局配置。
  • 使所有原语能够继承全局阅读方向。
  • 能够更改设置主体锁定时的滚动主体行为。
  • 更多控制以防止布局偏移。

结构

导入组件。

<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 的全局行为，以适应您的布局并防止任何 内容偏移。

Props 配置项

PropDefaultType说明
dir'ltr''ltr' | 'rtl'应用的全局阅读方向。所有基础组件都会继承该设置。
locale'en'string应用的全局区域设置。所有基础组件都会继承该设置。
nonce—string应用的全局 nonce 值。相关基础组件会继承该值。
scrollBodytrueboolean | ScrollBodyOption应用的全局滚动主体行为。相关基础组件会继承该设置。
useId—(() => string)全局 useId 注入，用于解决 hydration（服务端渲染 hydration 不一致）问题的临时方案。

Methods 方法

MethodsType说明
useId() => string全局 useId 注入，用于解决 hydration（服务端渲染 hydration 不一致）问题的临时方案。

示例

使用配置提供器。

将全局方向设置为 rtl，将滚动主体行为设置为 false（不会设置任何填充/边距）。

<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

<script setup lang="ts">
import { ConfigProvider } from 'reka-ui'
const useIdFunction = () => useId()
</script>

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