レイアウト

レイアウト上の問題点を正しく解決しましょう。

レイアウトコンポーネント

レイアウトコンポーネントは、レイアウトの責任をコンテンツとインタラクションから分離するために使用されます。これは、アプリケーションを保守可能で分かりやすくするための重要な懸念事項の分離であり、これらの原則を理解することは、インターフェースを効果的に構築するための鍵となります。

Box

Box は最も基本的なレイアウトコンポーネントです。Box は以下に使用されます。

• 子要素にスペースを提供する。
• コンテンツにサイズ制限を課す。
• フレックスコンテナとグリッドコンテナ内のレイアウト動作を制御する。
• レスポンシブなdisplayプロパティを使用して、画面サイズに基づいてコンテンツを非表示にする。

Flex

Flexコンポーネントは、Boxができることはすべて実行できますが、軸に沿ってアイテムを整理するための追加のプロパティセットが用意されています。CSSのflexboxプロパティへの便利なアクセスを提供します。

Grid

Grid は、コンテンツを列と行に整理するために使用されます。BoxとFlexと同様に、基になるCSSのgridプロパティへの便利なアクセスを提供するように作られています。

Section

Section は、ページコンテンツのより大きな部分間に一貫した垂直方向のスペースを提供し、階層と分離感を作り出します。シンプルで一貫性を保つために、いくつかの事前定義されたサイズが異なるスペースレベルに使用されています。

Container

Container の唯一の役割は、ラップするコンテンツに一貫したmax-widthを提供することです。Sectionと同様に、一般的なブレークポイントと快適な読書のための一般的なコンテンツ幅でうまく機能する、いくつかの事前定義されたサイズが用意されています。

共通のレイアウトプロパティ

各レイアウトコンポーネントには、独自の特殊なプロパティセットと、共有される共通のレイアウトプロパティセットがあります。すべてのレイアウトプロパティはレスポンシブなオブジェクト値をサポートしています。

Padding

Paddingプロパティはスペーススケールステップにアクセスするか、有効なCSS padding値を受け入れます。

<Box p="4" />
<Box p="100px">
<Box p={{ sm: '6', lg: '9' }}>

幅

幅プロパティは、有効なCSS幅値を受け入れます。

<Box width="100px" />
<Box width={{ md: '100vw', xl: '1400px' }} />

高さ

高さプロパティは、有効なCSS高さ値を受け入れます。

<Box height="100px" />
<Box height={{ md: '100vh', xl: '600px' }} />

配置

配置プロパティは、要素がドキュメントの通常のフローに対してどのように配置されるかを変更できます。通常どおり、各プロパティには対応するCSS値が受け入れられ、オフセット値にはスペーススケールステップを使用できます。

<Box position="relative" />
<Box position={{ initial: "relative", lg: "sticky" }} />

<Box inset="4" />
<Box inset={{ initial: "0", xl: "auto" }} />

<Box left="4" />
<Box left={{ initial: "0", xl: "auto" }} />

Flexの子要素

各レイアウトコンポーネントには、フレックスコンテナの子要素である場合のスタイルを制御するために使用されるプロパティがあります。

<Box flexBasis="100%" />
<Box flexShrink="0">
<Box flexGrow={{ initial: "0", lg: "1" }} />

Gridの子要素

各レイアウトコンポーネントには、グリッドコンテナの子要素である場合のスタイルを制御するために使用されるプロパティがあります。

<Box gridArea="header" />

<Box gridColumn="1 / 3" />
<Box gridColumnStart="2">
<Box gridColumnEnd={{ initial: "-1", md: "3", lg: "auto" }} />

<Box gridRow="1 / 3" />
<Box gridRowStart="2">
<Box gridRowEnd={{ initial: "-1", md: "3", lg: "auto" }} />

Marginプロパティ

要素の周囲にスペースを提供するために、ほとんどのコンポーネントでMarginプロパティを使用できます。レイアウトコンポーネント専用ではありません。

Marginプロパティはスペーススケールステップにアクセスするか、有効なCSS margin値を受け入れます。

<Button m="4" />
<Button m="100px">
<Button m={{ sm: '6', lg: '9' }}>

HTMLノードをレンダリングしないコンポーネント、またはレイアウトにRoot部分を依存するコンポーネントでは、Marginプロパティを使用できない場合があります。

スタンドアロンでの使用

必要に応じて、Radix Themesからレイアウトコンポーネントだけを使用できます。単にレイアウトコンポーネントを使用することも可能です。JavaScriptのツリーシェイキングが機能していることを確認し、レイアウトスタイルを制御するCSSをインポートしてください。

import '@radix-ui/themes/layout.css';

スペーススケールとスケーリングファクターの設定を提供するために、アプリケーションをThemeでラップする必要があります。