Materialny interfejs użytkownika i system siatki

Bawię się trochę z Material-UI . Czy są jakieś opcje tworzenia układu siatki (jak w Bootstrap )?

Jeśli nie, w jaki sposób można dodać tę funkcjonalność?

Istnieje składnik GridList, ale wydaje mi się, że ma on inny cel.

Material UI zaimplementował własny układ Flexbox za pośrednictwem komponentu Grid .

Wygląda na to, że początkowo chcieli pozostać czysto biblioteką „komponentów”. Ale jeden z głównych programistów zdecydował, że zbyt ważne jest, aby nie mieć własnego . Został teraz włączony do podstawowego kodu i został wydany w wersji 1.0.0 .

Możesz go zainstalować przez:

npm install @material-ui/core

Jest teraz w oficjalnej dokumentacji z przykładami kodu .

Z opisu specyfikacji projektu materiału :

Listy siatek są alternatywą dla standardowych widoków list. Listy siatek różnią się od siatek używanych do układów i innych prezentacji wizualnych.

Jeśli szukasz dużo lekkiej biblioteki komponentów Grid, używam React-Flexbox-Grid , implementacji flexboxgrid.cssw React.

Co więcej, React-Flexbox-Grid dobrze grał zarówno z interfejsem materiału , jak i React- toolbox (alternatywna implementacja Material Design).

Rozejrzałem się za odpowiedzią na to pytanie i najlepszym sposobem, jaki znalazłem, było użycie Flex i stylizacji inline na różnych komponentach.

Na przykład, aby podzielić mój pełny ekran na 2 pionowe komponenty (w stosunku 1: 4), następujący kod działa dobrze.

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

Teraz, wykonując więcej obliczeń, możesz łatwo podzielić komponenty na stronie.

Dalsze czytanie na flex

Mam nadzieję, że nie jest za późno na udzielenie odpowiedzi.

Szukałem również prostego, solidnego, elastycznego i wysoce konfigurowalnego systemu bootstrap, takiego jak React Grid, do wykorzystania w moich projektach.

Najlepsze, co wiem, to react-pure-grid https://www.npmjs.com/package/react-pure-grid

react-pure-grid daje możliwość dostosowania każdego aspektu systemu sieci, a jednocześnie ma wbudowane ustawienia domyślne, które prawdopodobnie pasują do każdego projektu

Stosowanie

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

Po prostu idę na http://getbootstrap.com/customize/ i sprawdzam tylko „grid system”, aby pobrać. Są bootstrap-theme.cssi bootstrap.cssw pobranych plikach, a ja potrzebuję tylko tego drugiego.

W ten sposób mogę korzystać z systemu grid w Bootstrap, ze wszystkim innym z Material UI.

Po prostu używam https://react-bootstrap.github.io/ dla Responsive Layout i Material-ui dla wszystkich komponentów

Miałem trudności ze znalezieniem frameworka interfejsu użytkownika, który implementowałby standardy Material Design dotyczące responsywnego zachowania, więc stworzyłem dwa pakiety, które implementują system siatki dla Material Design:

1. Struktura CSS: siatka reagująca na materiały
2. Zestaw komponentów React, które implementują ten szkielet: reagująca-materiał-reagująca-siatka .

Te pakiety są zgodne ze standardami responsywnego interfejsu użytkownika określonymi przez Google. Wszystkie rozmiary rzutni określone w ich standardach są obsługiwane z uwzględnieniem odpowiednich rynien, zalecanej liczby kolumn, a nawet zachowania układu przekraczającego 1600 dp. Powinien zachowywać się zgodnie z zaleceniami dla każdego urządzenia w przewodniku Metryki urządzeń .

Poniżej jest wykonany wyłącznie przez system MUI Grid ,

Za pomocą poniższego kodu

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

↓ KodSandbox ↓

To jest stare pytanie, ale Google zaprowadzi mnie tutaj. Po krótkich poszukiwaniach znalazłem dobry pakiet: https://www.npmjs.com/package/react-grid-system

Myślę, że to najlepszy, łatwy w użyciu i lekki.

Oto przykład systemu grid z material-ui, który jest podobny do 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>