レスポンシブデザイン

Yamada UIは、画面サイズに応じてスタイルを変更する機能を提供しています。

デフォルトでは、@media(max-width)のメディアクエリを用いたレスポンシブデザインを採用しています。もし、@media(min-width)のメディアクエリを採用する場合は、こちらをご覧ください。

概要

レスポンシブデザインは、テーマで定義されたブレイクポイントを参照します。Yamada UIには、デフォルトのテーマがあり、ブレイクポイントが定義されています。

ブレイクポイントを変更したい場合は、テーマのブレイクポイントをご覧ください。

レスポンシブデザインをStyle Propsに適用するには、ブレイクポイントをキーとしたオブジェクトを設定します。

Box

<Box p="md" color="fg.contrast" bg={{ base: "bg.contrast", md: "success" }}>
  Box
</Box>

上記のコードは、次のようなCSSが生成されます。

.Box {
  background: var(--ui-colors-bg-contrast);

  @media screen and (max-width: 768px) {
    background: var(--ui-colors-success);
  }
}

Yamada UIには、レスポンシブなレイアウトを構築するために便利なカスタムフックを提供しています。

現在のブレイクポイントを返すカスタムフックです。このフックは、ウィンドウのサイズの変更を監視し、適切な値を返します。

ブレイクポイントが変更されたときにエフェクトを実行するカスタムフックです。

初回のレンダリング時にはエフェクトをスキップし、ブレイクポイントが変更されたときにエフェクトを実行するカスタムフックです。

提供されたオブジェクトから現在のブレイクポイントを初期値として返すカスタムフックです。

提供されたオブジェクトから現在のブレイクポイントの値を返すカスタムフックです。このフックは、ウィンドウのサイズの変更を監視し、適切な値を返します。