Bahan UI dan sistem Grid

118

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.

kharandziuk
sumber
Jangan mengira ia memiliki komponen untuk membuat kisi responsif.
Lucky Chingi
jawabannya ada di sini github.com/callemall/material-ui/issues/190
kharandziuk

Jawaban:

126

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 .

icc97.dll
sumber
Saya melihat Anda memposting jawaban yang baru saja saya tambahkan! lol. baru saja menanggapi komentar Anda tentang jawaban utama saat ini.
Cleanshooter
Baru saja menginstal dan menggunakan cabang alfa Material UI sekarang. Dapat mengonfirmasi bahwa sistem Tata Letak berfungsi dengan baik.
pengguna2875289
3
Sistem grid bekerja dengan baik namun, Ada beberapa komponen yang belum diimplementasikan, seperti Select Field. Saya terjebak pada cara menggunakan bidang seperti itu. Bisakah Anda membantu saya melalui ini?
Suresh Mainali
1
Saya setuju dengan @SureshMainali karena saya juga menghadapi masalah yang sama. Sebagian besar komponen memiliki alat peraga yang hilang dan bahkan mengenai penerapan tema khusus juga
Sai Ram
@SaiRam Saya tidak akan mengatakan sebagian besar, tetapi memang Selecthilang, saya baru saja menggantinya dengan tombol radio untuk saat ini, tetapi saya yakin tidak akan lama sebelum pilih porting dari trunk.
icc97
35

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

Roy Lee
sumber
32
React-Flexbox-Grid tidak diimplementasikan dengan baik pada saat posting ini dan membutuhkan banyak dependensi eksternal untuk berfungsi dengan baik. Plus, @Roylee adalah pengembangnya ... jadi pendapatnya agak bias;) ...
Cleanshooter
1
Selain itu, react-flexbox-grid bergantung pada flexboxgrid, yang tidak menggunakan breakpoint responsif yang sama seperti yang direkomendasikan dalam Desain Material. Lihat: material.io/guidelines/layout/…
Ken Gregory
@Cleanshooter apakah ini versi bersaing Anda ? Mungkin Anda juga agak bias :)
icc97
@ icc97 ya dan tidak. Tidak benar-benar bermaksud untuk "bersaing", itu lebih merupakan celah berhenti untuk aplikasi yang saya buat. Saya membuatnya setelah kecewa dengan keduanya ... itu benar-benar tidak masalah lagi karena orang-orang di CallEmAll menyertakan sistem grid dalam rilis terbaru Material-UI. Saya belum mencobanya secara pribadi. github.com/callemall/material-ui/pull/5808
Cleanshooter
1
@Cleanso_buat milikmu tampak cukup bagus. Saya telah menguji kisi Material-UI baru dan sejauh ini berfungsi dengan baik.
icc97
20

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

shobhit1
sumber
2
Saya setuju, menggunakan properti flex css menghasilkan pemformatan sederhana yang saya butuhkan.
James Gentes
11

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>
);
Musyoka Morris
sumber
8

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.

6324
sumber
5

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

yuchien
sumber
3
Saya rasa ini agak berat :) Apakah ada cara untuk menyertakan hanya gaya yang berhubungan dengan kisi?
kharandziuk
2
Jadi menggunakan React-Bootstrap masih perlu menyertakan file css yang relevan. Dari getbootstrap.com/customize Anda dapat menyesuaikan untuk hanya menyertakan sistem Grid dan menggunakan versi
minifikasi
5

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 .

Ken Gregory
sumber
1

Di bawah ini dibuat dengan sistem Grid MUI murni ,

MUI - Tata Letak Kisi

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 ↓

Edit sistem MUI-Grid

Hasan Sefa Ozalp
sumber
0

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