概要

Yamada UIのコンフィグは、システムのさまざまな部分で使用されるグローバルな設定です。

テーマに定義されているコンフィグはこちらです。

import { defineConfig } from "@yamada-ui/react"

export const config = defineConfig({
  css: { varPrefix: "ui" },
  breakpoint: { direction: "down", identifier: "@media screen" },
  defaultColorMode: "light",
  defaultThemeScheme: "base",
  notice: { duration: 5000 },
  theme: { responsive: true },
})

プロパティ

プロパティ	デフォルト	説明
`css.layers`	-	カスケードレイヤーの設定。
`css.varPrefix`	`"ui"`	CSS変数のプレフィックス。
`breakpoint.base`	`"9999px"`	ブレイクポイントの基準値。
`breakpoint.containerRef`	-	コンテナクエリを使用する場合のコンテナ要素の参照先。
`breakpoint.direction`	`"down"`	レスポンシブデザインで採用されるメディアクエリ。
`breakpoint.identifier`	`"@media screen"`	ブレイクポイントで採用するクエリ。
`defaultColorMode`	`"light"`	デフォルトのカラーモード。
`defaultThemeScheme`	`"base"`	デフォルトのテーマスキーム。
`theme.responsive`	`false`	テーマのトークンでレスポンシブデザインを採用します。
`disableTransitionOnChange`	`false`	カラーモードまたはテーマの切り替え時に`transition`を無効にします。
`loading.screen.blockScrollOnMount`	`true`	ローディング中にスクロールをロックします。
`loading.screen.allowPinchZoom`	`false`	スクロールがロックされている場合、iOSでズームまたはピンチジェスチャを処理します。
`loading.screen.loadingScheme`	`"oval"`	ローディングのスキーム。
`loading.screen.duration`	`null`	ローディングの所要時間。
`loading.screen.loadingCount`	`0`	ローディングの初期値。
`loading.page.blockScrollOnMount`	`true`	ローディング中にスクロールをロックします。
`loading.page.allowPinchZoom`	`false`	スクロールがロックされている場合、iOSでズームまたはピンチジェスチャを処理します。
`loading.page.loadingScheme`	`"oval"`	ローディングのスキーム。
`loading.page.duration`	`null`	ローディングの所要時間。
`loading.page.loadingCount`	`0`	ローディングの初期値。
`loading.background.blockScrollOnMount`	`false`	ローディング中にスクロールをロックします。
`loading.background.allowPinchZoom`	`false`	スクロールがロックされている場合、iOSでズームまたはピンチジェスチャを処理します。
`loading.background.loadingScheme`	`"oval"`	ローディングのスキーム。
`loading.background.duration`	`null`	ローディングの所要時間。
`loading.background.loadingCount`	`0`	ローディングの初期値。
`notice.closable`	`true`	通知を閉じることができるようにします。
`notice.closeStrategy`	`["click", "drag"]`	通知の閉じる方法。
`notice.duration`	`5000`	通知の所要時間。
`notice.expand`	`false`	通知を展開して表示します。
`notice.limit`	`3`	通知の最大表示数。
`notice.placement`	`"start"`	通知の位置。
`snacks.closable`	`true`	スナックに閉じるボタンを表示します。
`snacks.duration`	`5000`	スナックの所要時間。
`snacks.limit`	-	スナックの最大表示数。
`snacks.placement`	`"start"`	スナックの位置。
`snacks.startIndex`	`0`	スナックが開始する`z-index`。