Material UI ve Grid sistemi

Material-UI ile biraz oynuyorum . Bir ızgara düzeni oluşturmak için herhangi bir seçenek var mı ( Bootstrap'teki gibi )?

Değilse, bu işlevi eklemenin yolu nedir?

Bir GridList bileşeni var ama sanırım farklı bir amacı var.

Material UI, Grid bileşeni aracılığıyla kendi Flexbox düzenini uygulamıştır .

Görünüşe göre başlangıçta kendilerini tamamen bir 'bileşenler' kitaplığı olarak tutmak istiyorlardı. Ancak çekirdek geliştiricilerden biri, kendi geliştiricilere sahip olmamanın çok önemli olduğuna karar verdi . Şimdi çekirdek koda birleştirildi ve v1.0.0 ile piyasaya sürüldü .

Şu yolla kurabilirsiniz:

npm install @material-ui/core

Artık kod örnekleriyle resmi belgelerde bulunmaktadır .

Materyal tasarım özelliklerinin açıklamasından :

Izgara Listeleri, standart liste görünümlerine bir alternatiftir. Kılavuz listeleri, düzenler ve diğer görsel sunumlar için kullanılan ızgaralardan farklıdır.

Çok hafif bir Grid bileşen kitaplığı arıyorsanız, React'te uygulaması olan React-Flexbox-Grid kullanıyorum flexboxgrid.css.

Bunun üzerine, FlexBox Şebeke-tepki hem de güzel oynadığı malzeme ui ve -araç kutusu tepki (alternatif malzeme tasarımı uygulaması).

Buna bir cevap bulmak için etrafıma baktım ve bulduğum en iyi yol, farklı bileşenlerde Flex ve satır içi stil kullanmaktı.

Örneğin, iki kağıt bileşeninin tam ekranı 2 dikey bileşene (1: 4 oranında) bölmesini sağlamak için aşağıdaki kod iyi çalışıyor.

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

Şimdi, biraz daha hesaplamayla bileşenlerinizi bir sayfada kolayca bölebilirsiniz.

Esnek üzerine daha fazla okuma

Umarım yanıt vermek için çok geç değildir.

Ayrıca projelerimde kullanmak için react grid sistemi gibi basit, sağlam, esnek ve son derece özelleştirilebilir bir önyükleme arıyordum.

Bildiğim en iyi şey react-pure-grid https://www.npmjs.com/package/react-pure-grid

react-pure-grid size şebeke sisteminizin her yönünü özelleştirme gücü verirken, aynı zamanda muhtemelen herhangi bir projeye uyan varsayılanları da içerir

kullanım

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

Yaptığım yöntem http://getbootstrap.com/customize/ adresine gitmek ve indirmek için sadece "grid sistemi" ni kontrol etmektir. İndirilen dosyalar var bootstrap-theme.cssve var ve bootstrap.csssadece ikincisine ihtiyacım var.

Bu şekilde, Bootstrap'in grid sistemini, Material UI'deki diğer her şeyle birlikte kullanabilirim.

Sadece kullanmak https://react-bootstrap.github.io/ tüm bileşen için Duyarlı Düzen ve Materyal-ui için

Duyarlı davranış için Materyal Tasarım standartlarını uygulayacak bir UI çerçevesi bulmakta güçlük çektim, bu yüzden Materyal Tasarım için bir grid sistemi uygulayan iki paket oluşturdum:

1. Bir CSS çerçevesi: malzeme duyarlı ızgara
2. Bu çerçeveyi uygulayan bir dizi React bileşeni: react-material-responsive-grid .

Bu paketler , Google tarafından özetlenen duyarlı kullanıcı arayüzü standartlarına uygundur . Standartlarında belirtilen tüm görüntü alanı boyutları, uygun oluklar, önerilen sütun sayısı ve hatta 1600 dp'yi aşan bir düzenin davranışı dikkate alınarak desteklenir. Cihaz Ölçümleri kılavuzundaki her cihaz için önerildiği gibi davranmalıdır .

Aşağıda tamamen MUI Grid sistemi ile yapılmıştır ,

Aşağıdaki kod ile,

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

Bu eski bir soru ama google beni buraya getiriyor. Biraz araştırdıktan sonra iyi bir paket buldum: https://www.npmjs.com/package/react-grid-system

Bence bu en iyisi, kullanımı kolay ve hafif.

İşte bootstrap'e benzeyen material-ui'li grid sistemi örneği:

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