Interfaccia utente materiale e sistema Grid

Sto giocando un po 'con Material-UI . Esistono opzioni per creare un layout di griglia (come in Bootstrap )?

In caso negativo, qual è il modo per aggiungere questa funzionalità?

C'è un componente GridList ma immagino che abbia uno scopo diverso.

L'interfaccia utente dei materiali ha implementato il proprio layout Flexbox tramite il componente Grid .

Sembra che inizialmente volessero mantenersi come una semplice libreria di "componenti". Ma uno degli sviluppatori principali ha deciso che era troppo importante non avere il proprio . Ora è stato unito al codice principale ed è stato rilasciato con la v1.0.0 .

Puoi installarlo tramite:

npm install @material-ui/core

Ora è nella documentazione ufficiale con esempi di codice .

Dalla descrizione delle specifiche di progettazione del materiale :

Gli elenchi a griglia sono un'alternativa alle visualizzazioni elenco standard. Gli elenchi di griglie sono distinti dalle griglie utilizzate per i layout e altre presentazioni visive.

Se stai cercando una libreria di componenti Grid molto leggera, sto usando React-Flexbox-Grid , l'implementazione di flexboxgrid.cssin React.

Inoltre, React-Flexbox-Grid ha giocato bene sia con material-ui che con react-toolbox (l'implementazione alternativa del material design).

Mi sono guardato intorno per trovare una risposta e il modo migliore che ho trovato è stato quello di utilizzare Flex e lo styling in linea su diversi componenti.

Ad esempio, per fare in modo che due componenti di carta dividano il mio schermo intero in 2 componenti verticali (in rapporto 1: 4), il codice seguente funziona bene.

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

Ora, con alcuni calcoli in più, puoi facilmente dividere i tuoi componenti su una pagina.

Ulteriori letture su flex

Spero che non sia troppo tardi per dare una risposta.

Stavo anche cercando un bootstrap semplice, robusto, flessibile e altamente personalizzabile come il sistema React Grid da utilizzare nei miei progetti.

Il meglio che conosco è react-pure-grid https://www.npmjs.com/package/react-pure-grid

react-pure-grid ti dà il potere di personalizzare ogni aspetto del tuo sistema di rete, mentre allo stesso tempo ha impostazioni predefinite che probabilmente si adattano a qualsiasi progetto

uso

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

Il modo in cui lo faccio è andare su http://getbootstrap.com/customize/ e selezionare solo "grid system" per il download. Ci sono bootstrap-theme.csse bootstrap.cssnei file scaricati e ho bisogno solo di quest'ultimo.

In questo modo, posso utilizzare il sistema a griglia di Bootstrap, con tutto il resto dell'interfaccia utente di Material.

Uso solo https://react-bootstrap.github.io/ per Layout reattivo e Material-ui per tutti i componenti

Ho avuto difficoltà a trovare un framework UI che implementasse gli standard di Material Design per un comportamento reattivo, quindi ho creato due pacchetti che implementano un sistema a griglia per Material Design:

1. Un framework CSS: material-responsive-grid
2. Un insieme di React componenti che implementano tale quadro: reagire-materiale reattivo-griglia .

Questi pacchetti seguono gli standard per l' interfaccia utente reattiva delineati da Google. Tutte le dimensioni del riquadro di visualizzazione specificate nei loro standard sono supportate tenendo conto dei margini interni appropriati, del numero di colonne consigliato e persino del comportamento di un layout che supera i 1600 dp. Dovrebbe comportarsi come consigliato per ogni dispositivo nella guida Device Metrics .

Di seguito è realizzato dal sistema puramente MUI Grid ,

Con il codice sottostante,

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

Questa è una vecchia domanda, ma Google mi ha portato qui. Dopo una piccola ricerca ho trovato un buon pacchetto: https://www.npmjs.com/package/react-grid-system

Penso che questo sia il migliore, facile da usare e leggero.

Ecco un esempio di sistema a griglia con material-ui che è simile a 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>