ホームページ ウェブフロントエンド jsチュートリアル MUI スタック: React で 1 次元レイアウトをマスターする

MUI スタック: React で 1 次元レイアウトをマスターする

Nov 05, 2024 pm 06:02 PM

導入

Web 開発ではシームレスな 1 次元レイアウトの作成が困難なことがよくありますが、MUI スタック を使用すると簡単になります。強力な React コンポーネント ライブラリである MUI は、Flexbox やカスタム CSS を深く掘り下げることなく、垂直方向と水平方向の配置を管理するための効率的なツールとして Stack コンポーネントを提供します。このガイドは、セットアップから実際の使用法まで MUI スタックの要点を理解し、React でのレイアウト構築エクスペリエンスを向上させるのに役立ちます。

MUI Stack: Mastering One-Dimensional Layouts in React

MUI スタックの概要

MUI スタックを使用してレイアウトの構築を開始するには、必要な MUI パッケージがインストールされていることを確認しましょう。 MUI の Stack コンポーネントは 3 つの主要なパッケージに依存しています:

  • @mui/material: これは、スタックを含むすべての MUI コンポーネントを含むコア パッケージです。
  • @emotion/react および @emotion/styled: MUI はデフォルトでスタイリングに Emotion を使用し、これらのパッケージによりコンポーネント スタイルのシームレスなカスタマイズが可能になります。

インストール

ターミナルで次のコマンドを実行して、必要なパッケージをインストールします。

# Using npm
npm install @mui/material @emotion/react @emotion/styled

# Using Yarn
yarn add @mui/material @emotion/react @emotion/styled
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

このステップでは、必要な依存関係をすべて備えた MUI スタックを実装する準備をします。 (簡単に視覚的に参照できるように、端末のインストール プロセスのスクリーンショットを含めます。)

MUI スタックの基本セットアップ

パッケージがインストールされたら、Stack をプロジェクトに組み込む準備が整いました。初期設定を見てみましょう:

スタックのインポートと使用

まず、React コンポーネント ファイルに Stack コンポーネントをインポートします。

import Stack from '@mui/material/Stack';
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

スタックの方向の構成

方向プロパティは MUI スタックの中心であり、水平または垂直の配置を簡単に設定できます。デフォルトでは、Stack は子を垂直列に配置します。これは要素を上から下に積み重ねるのに最適です。横型レイアウトの場合は、方向を「行」に切り替えます。

これが例です:

import React from 'react';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

function App() {
  return (
    <Stack direction="row" spacing={2}>
      <Typography variant="body1">First Item</Typography>
      <Typography variant="body1">Second Item</Typography>
      <Typography variant="body1">Third Item</Typography>
    </Stack>
  );
}

export default App;
ログイン後にコピー
ログイン後にコピー

このコードでは、direction="row" によって項目が水平方向に並べて配置され、それぞれの間に間隔があけられます。この設定は、メニュー バー、項目リスト、または行形式で表示する要素を作成する場合に役立ちます。

MUI Stack: Mastering One-Dimensional Layouts in React

この基盤により、MUI スタックはレイアウト構築エクスペリエンスを簡素化する準備ができています。構成、間隔、応答性の高いレイアウトについて詳しく説明していきますので、ご期待ください。

間隔と応答性の構成

視覚的に魅力的なレイアウトを作成するには、効果的な間隔が鍵となります。MUI スタックを使用すると、要素間の間隔を簡単に調整できます。 spacing プロパティを使用すると、固定値として、または画面サイズに応じて、子要素間の一貫したギャップを定義できます。

間隔

固定間隔を設定するには、数値を指定した spacing prop を使用するだけです。たとえば、spacing={2} は、すべての子の間に均一な間隔を追加します:

# Using npm
npm install @mui/material @emotion/react @emotion/styled

# Using Yarn
yarn add @mui/material @emotion/react @emotion/styled
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

ここでは、スタック内の各アイテム間に固定ギャップがあり、均等な間隔のきれいなレイアウトが作成されます。

応答間隔

MUI スタックでは、オブジェクトを spacing prop に渡すことで、レスポンシブな間隔を設定することもできます。これにより、画面サイズのブレークポイント (xs、sm、md など) に基づいてさまざまな間隔値が有効になります。

import Stack from '@mui/material/Stack';
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

この例では、画面が小さい場合は間隔が狭くなり、画面が大きい場合は間隔が広くなり、読みやすさが最適になるように自動的に調整されます。

MUI Stack: Mastering One-Dimensional Layouts in React

もう 1 つの便利な機能は、Stack の方向を応答的に調整する機能で、レイアウトをさまざまな画面サイズに適応させるのに役立ちます。異なるブレークポイントに異なる方向を指定するには、direction={{ xs: "column", sm: "row" }}:
を設定します。

import React from 'react';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

function App() {
  return (
    <Stack direction="row" spacing={2}>
      <Typography variant="body1">First Item</Typography>
      <Typography variant="body1">Second Item</Typography>
      <Typography variant="body1">Third Item</Typography>
    </Stack>
  );
}

export default App;
ログイン後にコピー
ログイン後にコピー

この設定では、非常に小さな画面 (携帯電話など) では項目が列に配置され、小さな画面 (タブレットなど) 以降では行レイアウトに切り替わります。

MUI Stack: Mastering One-Dimensional Layouts in React

強化されたレイアウトのカスタマイズ

MUI スタックには、より複雑で洗練されたレイアウトを構築するためのいくつかのカスタマイズ オプションが用意されています。仕切りと配置設定を使用してレイアウトをさらに調整する方法を見てみましょう。

区切り線の追加

ディバイダー プロップを使用すると、スタック アイテム間に視覚的なディバイダーを挿入できます。これは、リスト、ナビゲーション メニュー、またはボタンのグループ内の要素を明確に分離する場合に特に便利です。

<Stack direction="row" spacing={2}>
  <Typography variant="body1">Item 1</Typography>
  <Typography variant="body1">Item 2</Typography>
  <Typography variant="body1">Item 3</Typography>
</Stack>
ログイン後にコピー

この例では、行レイアウトの各項目の間に垂直区切り線が配置され、読みやすさと構造が強化されています。スタック方向が列に設定されている場合は、方向を水平に設定することもできます。

MUI Stack: Mastering One-Dimensional Layouts in React

位置調整と位置合わせ

スタック アイテムを正確に配置するために、MUI スタックは justifyContent プロパティと alignItems プロパティをサポートしており、それぞれ主軸と交差軸に沿った配置を制御します。

  • justifyContent: 主軸に沿って項目を配置します (direction="row" の場合は水平、direction="column" の場合は垂直)。
  • alignItems: 項目を交差軸に沿って配置します (direction="row" の場合は垂直、direction="column" の場合は水平)。

例:

# Using npm
npm install @mui/material @emotion/react @emotion/styled

# Using Yarn
yarn add @mui/material @emotion/react @emotion/styled
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

この設定では、justifyContent="center" によって項目が主軸に沿って中央に配置され、alignItems="center" によって項目が交差軸に沿って中央に配置されるため、レイアウトがきれいに中央に配置されます。この柔軟性により、さまざまな画面サイズに適応し、視覚的な調和を維持するレイアウトを作成できます。

カスタム スタイリングのためのシステム プロップの使用

MUI スタックは、システム プロパティ をサポートします。これは、マージン、パディング、その他のレイアウト関連の CSS をコンポーネントに直接適用できる便利なスタイル プロパティです。システム プロパティを使用すると、追加の CSS ファイルが不要になり、コンポーネント内のスタイルを管理できるようになり、コードを整理して効率的に保つことができます。

たとえば、スタックの周囲にパディングを追加したり、スタックと他の要素の間にマージンを追加するには、p (パディング) または m (マージン) プロパティを直接設定できます。

import Stack from '@mui/material/Stack';
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

この例では、p={2} はスタックの周囲に内部パディングを追加し、m={3} はスタックとページ上の他の要素の間に外部マージンを作成します。これらの短縮システム プロパティを使用して、マージン (m)、パディング (p)、幅 (width)、高さ (height) などのさまざまな調整を行うことができ、追加の CSS コードを使用せずに大幅なレイアウト制御を実現できます。

7. 結論

MUI スタックは、React で 1 次元レイアウトを管理するための非常に柔軟で効率的なコンポーネントです。 Stack は要素の配置、間隔、応答性を簡素化することでカスタム CSS の必要性を減らし、開発プロセスを加速します。

システム プロパティを通じてレイアウトの方向、間隔、スタイルを制御できる機能により、MUI スタックは、クリーンで保守しやすいコードを重視するプロジェクトに強力に追加されます。シンプルなナビゲーション バーを構築する場合でも、複雑な応答性の高いレイアウトを構築する場合でも、MUI スタックは UI を構造化する合理的な方法を提供します。

追加の MUI ドキュメントを自由に参照して、高度なシステム プロップ、レスポンシブ デザインの強化、包括的なレイアウト ソリューションのためのスタックと他の MUI コンポーネントの統合など、さらに多くのカスタマイズ オプションを利用できるようにしてください。

以上がMUI スタック: React で 1 次元レイアウトをマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Python vs. JavaScript:学習曲線と使いやすさ Python vs. JavaScript:学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

C/CからJavaScriptへ:すべてがどのように機能するか C/CからJavaScriptへ:すべてがどのように機能するか Apr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptとWeb:コア機能とユースケース JavaScriptとWeb:コア機能とユースケース Apr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScript in Action:実際の例とプロジェクト JavaScript in Action:実際の例とプロジェクト Apr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptエンジンの理解:実装の詳細 JavaScriptエンジンの理解:実装の詳細 Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript:コミュニティ、ライブラリ、リソース Python vs. JavaScript:コミュニティ、ライブラリ、リソース Apr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

Python vs. JavaScript:開発環境とツール Python vs. JavaScript:開発環境とツール Apr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1)Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2)JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScript通訳者とコンパイラにおけるC/Cの役割 JavaScript通訳者とコンパイラにおけるC/Cの役割 Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

See all articles