Bahan UI dan sistem Grid

Saya bermain sedikit dengan Material-UI . Apakah ada opsi untuk membuat tata letak kisi (seperti di Bootstrap )?

Jika tidak, bagaimana cara menambahkan fungsionalitas ini?

Ada komponen GridList tapi saya rasa itu memiliki tujuan yang berbeda.

Material UI telah mengimplementasikan tata letak Flexbox mereka sendiri melalui komponen Grid .

Tampaknya mereka awalnya ingin menjaga diri mereka sendiri sebagai perpustakaan 'komponen' murni. Tetapi salah satu pengembang inti memutuskan bahwa terlalu penting untuk tidak memiliki pengembang sendiri . Sekarang telah digabungkan ke dalam kode inti dan dirilis dengan v1.0.0 .

Anda dapat menginstalnya melalui:

npm install @material-ui/core

Sekarang ada dalam dokumentasi resmi dengan contoh kode .

Dari uraian spesifikasi desain material :

Daftar Kisi adalah alternatif dari tampilan daftar standar. Daftar kisi berbeda dari kisi yang digunakan untuk tata letak dan presentasi visual lainnya.

Jika Anda mencari pustaka komponen Grid yang jauh lebih ringan, saya menggunakan React-Flexbox-Grid , implementasi flexboxgrid.cssdi React.

Selain itu, React-Flexbox-Grid bermain bagus dengan material-ui , dan react-toolbox (implementasi desain material alternatif).

Saya mencari-cari jawaban untuk ini dan cara terbaik yang saya temukan adalah dengan menggunakan gaya Flex dan inline pada komponen yang berbeda.

Misalnya, untuk membuat dua komponen kertas membagi layar penuh saya menjadi 2 komponen vertikal (dalam rasio 1: 4), kode berikut berfungsi dengan baik.

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

Sekarang, dengan beberapa perhitungan lagi, Anda dapat dengan mudah membagi komponen Anda pada satu halaman.

Bacaan lebih lanjut tentang flex

Saya harap ini belum terlambat untuk memberikan tanggapan.

Saya juga mencari bootstrap yang sederhana, kuat, fleksibel, dan sangat dapat disesuaikan seperti sistem grid react untuk digunakan dalam proyek saya.

Yang terbaik yang saya ketahui adalah react-pure-grid https://www.npmjs.com/package/react-pure-grid

react-pure-grid memberi Anda kekuatan untuk menyesuaikan setiap aspek dari sistem grid Anda, sementara pada saat yang sama telah dibangun secara default yang mungkin sesuai dengan proyek apa pun

Pemakaian

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

Cara yang saya lakukan adalah pergi ke http://getbootstrap.com/customize/ dan hanya centang "sistem grid" untuk mendownload. Ada bootstrap-theme.cssdanbootstrap.css dalam file yang diunduh, dan saya hanya perlu yang terakhir.

Dengan cara ini, saya dapat menggunakan sistem grid Bootstrap, dengan yang lainnya dari Material UI.

Saya hanya menggunakan https://react-bootstrap.github.io/ untuk Tata Letak Responsif dan Material-ui untuk semua komponen

Saya mengalami kesulitan menemukan kerangka kerja UI yang akan mengimplementasikan standar Desain Material untuk perilaku responsif, jadi saya telah membuat dua paket yang menerapkan sistem kisi untuk Desain Material:

1. Kerangka kerja CSS: material-responsive-grid
2. Satu set komponen React yang mengimplementasikan framework tersebut: react-material-responsive-grid .

Paket ini mengikuti standar untuk UI responsif yang diuraikan oleh Google. Semua ukuran area pandang yang ditentukan dalam standarnya didukung dengan pertimbangan untuk talang yang tepat, jumlah kolom yang disarankan, dan bahkan perilaku tata letak yang melebihi 1600 dp. Ini harus berperilaku seperti yang direkomendasikan untuk setiap perangkat di panduan Metrik Perangkat .

Di bawah ini dibuat dengan sistem Grid MUI murni ,

Dengan kode di bawah ini,

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

Ini pertanyaan lama tapi google membawa saya ke sini. Setelah sedikit pencarian saya menemukan paket yang bagus: https://www.npmjs.com/package/react-grid-system

Menurut saya inilah yang terbaik, mudah digunakan dan ringan.

Berikut contoh sistem grid dengan material-ui yang mirip dengan 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>