コンフィグプロバイダー

グローバル設定を提供するためにアプリケーションをラップします。

• すべてのプリミティブがグローバルな読み取り方向を継承できるようにします。
• ボディロックを設定する際のスクロールボディの動作を変更できます。
• レイアウトシフトを防ぐためのより多くの制御機能を提供します。

構成

コンポーネントをインポートします。

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

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

APIリファレンス

コンフィグプロバイダー

右から左への読み取り方向 (RTL) を必要とするローカライズされたアプリを作成する場合は、アプリケーションを`ConfigProvider`コンポーネントでラップして、すべてのプリミティブが`dir`プロップに基づいて動作を調整することを確認する必要があります。

`Alert`、`DropdownMenu`など、レイアウトに適合させるためにコンポーネントの`bodylock`のグローバルな動作を変更して、コンテンツシフトを防止することもできます。

プロップ	デフォルト	型
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>