Material UI und Grid System

Ich spiele ein bisschen mit Material-UI . Gibt es Optionen zum Erstellen eines Rasterlayouts (wie in Bootstrap )?

Wenn nicht, wie kann diese Funktionalität hinzugefügt werden?

Es gibt eine GridList-Komponente, aber ich denke, sie hat einen anderen Zweck.

Die Material-Benutzeroberfläche hat über die Grid-Komponente ein eigenes Flexbox-Layout implementiert .

Es scheint, dass sie sich ursprünglich als reine "Komponenten" -Bibliothek behalten wollten . Einer der Hauptentwickler entschied jedoch, dass es zu wichtig sei, keine eigenen zu haben . Es wurde nun in den Kerncode integriert und mit v1.0.0 veröffentlicht .

Sie können es installieren über:

npm install @material-ui/core

Es ist jetzt in der offiziellen Dokumentation mit Codebeispielen .

Aus der Beschreibung der Materialdesignspezifikationen :

Rasterlisten sind eine Alternative zu Standardlistenansichten. Gitterlisten unterscheiden sich von Gittern, die für Layouts und andere visuelle Präsentationen verwendet werden.

Wenn Sie nach einer sehr einfachen Grid-Komponentenbibliothek suchen, verwende ich React-Flexbox-Grid , die Implementierung von flexboxgrid.cssin React.

Hinzu kommt, dass, React-Flexbox-Grid gut mit sowohl gespielt Material-ui und reagiert-Toolbox (die alternative Material - Design - Implementierung).

Ich sah mich nach einer Antwort darauf um und fand am besten Flex und Inline-Styling für verschiedene Komponenten.

Wenn beispielsweise zwei Papierkomponenten meinen Vollbildmodus in zwei vertikale Komponenten (im Verhältnis 1: 4) aufteilen, funktioniert der folgende Code einwandfrei.

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>
    )
  }
}

Mit einigen weiteren Berechnungen können Sie Ihre Komponenten jetzt einfach auf einer Seite unterteilen.

Weiterführende Literatur zu flex

Ich hoffe, das ist nicht zu spät, um eine Antwort zu geben.

Ich suchte auch nach einem einfachen, robusten, flexiblen und hochgradig anpassbaren Bootstrap-ähnlichen React-Grid-System für meine Projekte.

Das Beste, was ich weiß, ist react-pure-grid https://www.npmjs.com/package/react-pure-grid

react-pure-grid Sie haben die Möglichkeit, jeden Aspekt Ihres Grid-Systems anzupassen, während gleichzeitig Standardeinstellungen eingebaut sind, die wahrscheinlich für jedes Projekt geeignet sind

Verwendung

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>
);

Ich gehe zu http://getbootstrap.com/customize/ und überprüfe nur "Grid System" zum Herunterladen. Es gibt bootstrap-theme.cssund bootstrap.cssin heruntergeladenen Dateien, und ich brauche nur letztere.

Auf diese Weise kann ich das Rastersystem von Bootstrap mit allem anderen aus der Material-Benutzeroberfläche verwenden.

Ich verwende nur https://react-bootstrap.github.io/ für Responsive Layout und Material-UI für alle Komponenten

Ich hatte Schwierigkeiten, ein UI-Framework zu finden, das die Standards von Material Design für reaktionsschnelles Verhalten implementiert. Daher habe ich zwei Pakete erstellt, die ein Rastersystem für Material Design implementieren:

1. Ein CSS-Framework: Material-Responsive-Grid
2. Eine Reihe von React-Komponenten, die dieses Framework implementieren: React -Material-Responsive-Grid .

Diese Pakete folgen den von Google festgelegten Standards für reaktionsschnelle Benutzeroberflächen . Alle in ihren Standards angegebenen Ansichtsfenstergrößen werden unter Berücksichtigung der richtigen Dachrinnen, der empfohlenen Anzahl von Spalten und sogar des Verhaltens eines Layouts mit mehr als 1600 dp unterstützt. Es sollte sich wie für jedes Gerät im Gerätemetrikhandbuch empfohlen verhalten .

Unten wird von rein MUI Grid System gemacht ,

Mit dem Code unten,

// 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 ↓

Dies ist eine alte Frage, aber Google bringt mich hierher. Nach einer kleinen Suche fand ich ein gutes Paket: https://www.npmjs.com/package/react-grid-system

Ich denke, das ist das Beste, einfach zu bedienen und leicht.

Hier ist ein Beispiel für ein Rastersystem mit material-ui, das dem Bootstrap ähnelt:

<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>