配置提供者

包装您的应用程序以提供全局配置。

• 使所有基本元素能够继承全局阅读方向。
• 启用在设置主体锁定时更改滚动主体行为。
• 更多控制以防止布局偏移。

结构

导入组件。

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

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

API 参考

配置提供者

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

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

属性	默认值	类型
dir	'ltr'	'ltr' | 'rtl' 应用程序的全局阅读方向。这将由所有基本元素继承。
nonce		字符串 应用程序的全局 nonce 值。这将由相关基本元素继承。
scrollBody	true	boolean | ScrollBodyOption 应用程序的全局滚动主体行为。这将由相关基本元素继承。
useId		(() => string) 全局 useId 注入，作为防止水合问题的一种解决方法。

示例

使用配置提供者。

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

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

<template>
  <ConfigProvider
    dir="rtl"
    :scroll-body="false"
  >
    <slot />
  </ConfigProvider>
</template>

水合问题 (Vue < 3.5)

我们公开了一个临时的解决方法，以允许当前的 Nuxt（版本 >3.10）项目通过使用 Nuxt 提供的 useId 来修复当前的水合问题。

受 Headless UI 的启发

<!-- in Nuxt's app.vue -->
<script setup lang="ts">
import { ConfigProvider } from 'radix-vue'

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

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