Matériel UI et système de grille

Je joue un peu avec Material-UI . Existe-t-il des options pour créer une disposition de grille (comme dans Bootstrap )?

Sinon, comment ajouter cette fonctionnalité?

Il existe un composant GridList mais je suppose qu'il a un objectif différent.

Material UI a implémenté sa propre disposition Flexbox via le composant Grid .

Il semble qu'ils voulaient au départ se conserver comme une simple bibliothèque de «composants». Mais l'un des principaux développeurs a décidé qu'il était trop important de ne pas en avoir . Il a maintenant été fusionné dans le code principal et a été publié avec la v1.0.0 .

Vous pouvez l'installer via:

npm install @material-ui/core

C'est maintenant dans le officiel documentation avec des exemples de code .

À partir de la description des spécifications de conception des matériaux :

Les listes de grille sont une alternative aux vues de liste standard. Les listes de grille sont distinctes des grilles utilisées pour les mises en page et autres présentations visuelles.

Si vous recherchez une bibliothèque de composants Grid beaucoup plus légère, j'utilise React-Flexbox-Grid , l'implémentation de flexboxgrid.cssdans React.

En plus de cela, React-Flexbox-Grid a bien joué avec material-ui et react-toolbox (l'implémentation alternative de la conception de matériaux).

J'ai cherché une réponse à cela et le meilleur moyen que j'ai trouvé était d'utiliser Flex et le style en ligne sur différents composants.

Par exemple, pour que deux composants papier divisent mon plein écran en 2 composants verticaux (dans un rapport de 1: 4), le code suivant fonctionne correctement.

const styles = {
  div:{
    display: 'flex',
    flexDirection: 'row wrap',
    padding: 20,
    width: '100%'
  },
  paperLeft:{
    flex: 1,
    height: '100%',
    margin: 10,
    textAlign: 'center',
    padding: 10
  },
  paperRight:{
    height: 600,
    flex: 4,
    margin: 10,
    textAlign: 'center',
  }
};

class ExampleComponent extends React.Component {
  render() {
    return (
      <div>
        <div style={styles.div}>
          <Paper zDepth={3} style={styles.paperLeft}>
            <h4>First Vertical component</h4>
          </Paper>
          <Paper zDepth={3} style={styles.paperRight}>
              <h4>Second Vertical component</h4>
          </Paper>
        </div>
      </div>
    )
  }
}

Maintenant, avec quelques calculs supplémentaires, vous pouvez facilement diviser vos composants sur une page.

Lectures complémentaires sur flex

J'espère qu'il n'est pas trop tard pour donner une réponse.

J'étais également à la recherche d'un système bootstrap simple, robuste, flexible et hautement personnalisable comme le React Grid à utiliser dans mes projets.

Le mieux que je connaisse est react-pure-grid https://www.npmjs.com/package/react-pure-grid

react-pure-grid vous donne le pouvoir de personnaliser tous les aspects de votre système de réseau, tout en intégrant des valeurs par défaut qui conviennent probablement à n'importe quel projet

Usage

npm install react-pure-grid --save

-

import {Container, Row, Col} from 'react-pure-grid';

const App = () => (
      <Container>
        <Row>
          <Col xs={6} md={4} lg={3}>Hello, world!</Col>
        </Row>
        <Row>
            <Col xsOffset={5} xs={7}>Welcome!</Col>
        </Row>
      </Container>
);

La façon dont je le fais est d'aller sur http://getbootstrap.com/customize/ et de cocher uniquement "grid system" pour télécharger. Il y a bootstrap-theme.cssetbootstrap.css dans les fichiers téléchargés, et je n'ai besoin que de ce dernier.

De cette façon, je peux utiliser le système de grille de Bootstrap, avec tout le reste de Material UI.

J'utilise juste https://react-bootstrap.github.io/ pour Responsive Layout et Material-ui pour tous les composants

J'ai eu du mal à trouver un cadre d'interface utilisateur qui implémenterait les normes de Material Design pour le comportement réactif, j'ai donc créé deux packages qui implémentent un système de grille pour Material Design:

1. Un framework CSS: material-responsive-grid
2. Un ensemble de composants React qui implémentent ce cadre: react-material-responsive-grid .

Ces packages respectent les normes d' interface utilisateur réactive décrites par Google. Toutes les tailles de fenêtres spécifiées dans leurs normes sont prises en charge en tenant compte des gouttières appropriées, du nombre recommandé de colonnes et même du comportement d'une mise en page qui dépasse 1600 dp. Il doit se comporter comme recommandé pour chaque appareil dans le guide Device Metrics .

Ci-dessous est fait par un système purement MUI Grid ,

Avec le code ci-dessous,

// MuiGrid.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary,
    backgroundColor: "#b5b5b5",
    margin: "10px"
  }
}));

export default function FullWidthGrid() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container spacing={0}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

↓ CodeSandbox ↓

C'est une vieille question mais google m'amène ici. Après une petite recherche, j'ai trouvé un bon package: https://www.npmjs.com/package/react-grid-system

Je pense que c'est le meilleur, facile à utiliser et léger.

Voici un exemple de système de grille avec material-ui qui est similaire à bootstrap:

<Grid container>
    <Grid item xs={12} sm={4} md={4} lg={4}>
    </Grid>
    <Grid item xs={12} sm={4} md={4} lg={4}>
    </Grid>
 </Grid>