Pile MUI : maîtriser les mises en page unidimensionnelles dans React

Introduction

Créer une mise en page transparente et unidimensionnelle est souvent un défi dans le développement Web, mais MUI Stack rend les choses simples. MUI, une puissante bibliothèque de composants React, propose le composant Stack comme un outil efficace pour gérer les arrangements verticaux et horizontaux sans plonger profondément dans Flexbox ou CSS personnalisé. Ce guide vous aidera à comprendre les éléments essentiels de MUI Stack, de la configuration à l'utilisation pratique, pour améliorer votre expérience de création de mise en page dans React.

Premiers pas avec la pile MUI

Pour commencer à créer des mises en page avec MUI Stack, assurons-nous que les packages MUI nécessaires sont installés. Le composant Stack de MUI s'appuie sur trois packages principaux :

• @mui/material : Il s'agit du package de base contenant tous les composants MUI, y compris Stack.
• @emotion/react et @emotion/styled : MUI utilise Emotion pour le style par défaut, et ces packages permettent une personnalisation transparente des styles de composants.

Installation

Exécutez les commandes suivantes dans votre terminal pour installer les packages requis :

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

# Using Yarn
yarn add @mui/material @emotion/react @emotion/styled

Cette étape vous préparera à la mise en œuvre de MUI Stack avec toutes les dépendances nécessaires. (Inclure une capture d'écran du processus d'installation du terminal pour une référence visuelle rapide.)

Configuration de base de la pile MUI

Une fois les packages installés, vous êtes prêt à intégrer Stack dans votre projet. Passons en revue la configuration initiale :

Importation et utilisation de Stack

Pour commencer, importez le composant Stack dans votre fichier de composant React :

import Stack from '@mui/material/Stack';

Configuration de la direction de la pile

La propriété direction est au cœur de MUI Stack, vous permettant de configurer facilement une disposition horizontale ou verticale. Par défaut, Stack dispose ses enfants dans une colonne verticale, ce qui est parfait pour empiler des éléments de haut en bas. Pour une mise en page horizontale, changez la direction en « ligne ».

Voici un exemple :

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;

Dans ce code, direction="row" dispose les éléments côte à côte horizontalement, avec un espacement entre chacun. Cette configuration est utile pour créer des barres de menus, des listes d'éléments ou tout élément que vous souhaitez afficher sous forme de ligne.

Avec cette base, MUI Stack est prêt à simplifier votre expérience de création de mise en page. Restez à l’écoute pendant que nous approfondissons la configuration, l’espacement et les mises en page réactives.

Configuration de l'espacement et de la réactivité

Un espacement efficace est essentiel pour créer des mises en page visuellement attrayantes, et MUI Stack facilite l'ajustement de l'espacement entre les éléments. Avec l'accessoire d'espacement, vous pouvez définir des espaces cohérents entre les éléments enfants, soit sous forme de valeur fixe, soit en fonction de la taille de l'écran.

Espacement

Pour définir un espacement fixe, utilisez simplement l'accessoire d'espacement avec une valeur numérique. Par exemple, spacing={2} ajoutera un espace uniforme entre tous les enfants :

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

# Using Yarn
yarn add @mui/material @emotion/react @emotion/styled

Ici, chaque élément de la pile a un espace fixe entre eux, créant une disposition propre et uniformément espacée.

Espacement réactif

MUI Stack permet également un espacement réactif en passant un objet à l'accessoire d'espacement. Cela permet différentes valeurs d'espacement en fonction des points d'arrêt de la taille de l'écran (par exemple, xs, sm, md) :

import Stack from '@mui/material/Stack';

Dans cet exemple, l'espacement sera plus étroit sur les écrans plus petits et plus large sur les écrans plus grands, s'ajustant automatiquement pour une lisibilité optimale.

Une autre fonctionnalité utile est la capacité de Stack à ajuster la direction de manière réactive, aidant ainsi votre mise en page à s'adapter à différentes tailles d'écran. Vous pouvez spécifier différentes directions pour différents points d'arrêt en définissant 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;

Dans cette configuration, les éléments sont disposés en colonne sur des écrans très petits (par exemple, les téléphones) et passent à une disposition en lignes sur les petits écrans (par exemple, les tablettes) et plus grands.

Personnalisation améliorée de la mise en page

MUI Stack propose plusieurs options de personnalisation pour créer des mises en page plus complexes et plus soignées. Voyons comment utiliser les séparateurs et les paramètres d'alignement pour affiner davantage votre mise en page.

Ajout de séparateurs

L'accessoire diviseur vous permet d'insérer un séparateur visuel entre les éléments de la pile. Ceci est particulièrement utile pour séparer clairement les éléments dans des listes, des menus de navigation ou des groupes de boutons.

<Stack direction="row" spacing={2}>
  <Typography variant="body1">Item 1</Typography>
  <Typography variant="body1">Item 2</Typography>
  <Typography variant="body1">Item 3</Typography>
</Stack>

Dans cet exemple, un séparateur vertical est placé entre chaque élément dans la disposition des lignes, améliorant ainsi la lisibilité et la structure. Vous pouvez également définir l'orientation sur horizontale si la direction de la pile est définie sur colonne.

Justification et alignement

Pour positionner les éléments de la pile avec précision, MUI Stack prend en charge les accessoires justifierContent et alignItems, qui contrôlent l'alignement le long des axes principal et transversal, respectivement :

• justifyContent : aligne les éléments le long de l'axe principal (horizontal si direction="row" ; vertical si direction="column").
• alignItems : aligne les éléments le long de l'axe transversal (vertical si direction="row" ; horizontal si direction="column").

Exemple :

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

# Using Yarn
yarn add @mui/material @emotion/react @emotion/styled

Dans cette configuration, justifierContent="center" centre les éléments le long de l'axe principal, tandis que alignItems="center" les centre le long de l'axe transversal, ce qui donne une disposition parfaitement centrée. Cette flexibilité vous permet de créer des mises en page qui s'adaptent à différentes tailles d'écran et maintiennent l'harmonie visuelle.

Utilisation des accessoires système pour un style personnalisé

MUI Stack prend en charge les accessoires système, qui sont des propriétés de style pratiques qui vous permettent d'appliquer des marges, du remplissage et d'autres CSS liés à la mise en page directement sur le composant. Les accessoires système éliminent le besoin de fichiers CSS supplémentaires, vous permettant de gérer les styles au sein de vos composants, gardant ainsi votre code organisé et efficace.

Par exemple, pour ajouter un remplissage autour de la pile ou une marge entre celle-ci et d'autres éléments, vous pouvez directement définir les accessoires p (padding) ou m (marge) :

import Stack from '@mui/material/Stack';

Dans cet exemple, p={2} ajoute un remplissage interne autour de la pile, tandis que m={3} crée une marge externe entre la pile et les autres éléments de la page. Vous pouvez utiliser ces accessoires système abrégés pour divers ajustements, notamment la marge (m), le remplissage (p), la largeur (largeur) et la hauteur (hauteur), offrant un contrôle de mise en page important sans code CSS supplémentaire.

7. Conclusion

MUI Stack est un composant très flexible et efficace pour gérer les mises en page unidimensionnelles dans React. En simplifiant l'alignement, l'espacement et la réactivité des éléments, Stack réduit le besoin de CSS personnalisé et accélère le processus de développement.

La possibilité de contrôler la direction, l'espacement et le style de la mise en page via les accessoires système fait de MUI Stack un ajout puissant à tout projet qui valorise un code propre et maintenable. Que vous créiez des barres de navigation simples ou des mises en page réactives complexes, MUI Stack offre un moyen simplifié de structurer votre interface utilisateur.

N'hésitez pas à explorer la documentation MUI supplémentaire pour débloquer encore plus d'options de personnalisation, telles que des accessoires système avancés, des améliorations de conception réactive et l'intégration de Stack avec d'autres composants MUI pour des solutions de mise en page complètes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!