Giao diện người dùng vật liệu và hệ thống lưới

Tôi đang chơi một chút với Material-UI . Có bất kỳ tùy chọn nào để tạo bố cục lưới (như trong Bootstrap ) không?

Nếu không, cách để thêm chức năng này là gì?

Có một thành phần GridList nhưng tôi đoán nó có một số mục đích khác nhau.

Material UI đã triển khai bố cục Flexbox của riêng họ thông qua thành phần Grid .

Có vẻ như ban đầu họ muốn giữ cho mình hoàn toàn là một thư viện 'thành phần'. Nhưng một trong những nhà phát triển cốt lõi đã quyết định rằng việc không có cái riêng là quá quan trọng . Nó hiện đã được hợp nhất vào mã lõi và được phát hành với v1.0.0 .

Bạn có thể cài đặt nó qua:

npm install @material-ui/core

Nó hiện đã có trong tài liệu chính thức với các ví dụ về mã .

Từ mô tả về thông số kỹ thuật material design :

Danh sách lưới là một thay thế cho chế độ xem danh sách tiêu chuẩn. Danh sách lưới khác biệt với các lưới được sử dụng cho bố cục và các bản trình bày trực quan khác.

Nếu bạn đang tìm kiếm một thư viện thành phần Grid nhẹ, tôi đang sử dụng React-Flexbox-Grid , việc triển khai flexboxgrid.csstrong React.

Trên hết, React-Flexbox-Grid chơi tuyệt vời với cả material-ui và react -toolbox (triển khai thiết kế material design thay thế).

Tôi đã xem xét xung quanh để tìm câu trả lời cho điều này và cách tốt nhất tôi tìm thấy là sử dụng Flex và tạo kiểu nội tuyến trên các thành phần khác nhau.

Ví dụ: để làm cho hai thành phần giấy chia toàn màn hình của tôi thành 2 thành phần dọc (theo tỷ lệ 1: 4), mã sau hoạt động tốt.

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

Giờ đây, với một số phép tính khác, bạn có thể dễ dàng phân chia các thành phần của mình trên một trang.

Đọc thêm trên flex

Tôi hy vọng điều này không quá muộn để đưa ra phản hồi.

Tôi cũng đang tìm kiếm một bootstrap đơn giản, mạnh mẽ, linh hoạt và có thể tùy chỉnh cao như hệ thống lưới phản ứng để sử dụng trong các dự án của mình.

Điều tốt nhất tôi biết là react-pure-grid https://www.npmjs.com/package/react-pure-grid

react-pure-grid cung cấp cho bạn sức mạnh để tùy chỉnh mọi khía cạnh của hệ thống lưới điện của bạn, đồng thời nó được tích hợp sẵn các giá trị mặc định có thể phù hợp với mọi dự án

Sử dụng

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

Cách tôi làm là truy cập http://getbootstrap.com/customize/ và chỉ kiểm tra "hệ thống lưới" để tải xuống. Có bootstrap-theme.cssvà bootstrap.csstrong các tệp đã tải xuống, và tôi chỉ cần tệp sau.

Bằng cách này, tôi có thể sử dụng hệ thống lưới của Bootstrap, với mọi thứ khác từ Material UI.

Tôi chỉ sử dụng https://react-bootstrap.github.io/ cho Bố cục đáp ứng và Material-ui cho tất cả thành phần

Tôi đã gặp khó khăn khi tìm một khung giao diện người dùng sẽ triển khai các tiêu chuẩn của Material Design cho hành vi đáp ứng, vì vậy tôi đã tạo hai gói triển khai hệ thống lưới cho Material Design:

1. Khung CSS: material-responsive-grid
2. Một tập hợp các thành phần React triển khai khuôn khổ đó: react-material-responsive-grid .

Các gói này tuân theo các tiêu chuẩn về giao diện người dùng đáp ứng do Google vạch ra. Tất cả các kích thước cửa sổ xem được chỉ định trong tiêu chuẩn của chúng đều được hỗ trợ với việc xem xét máng xối thích hợp, số lượng cột được đề xuất và thậm chí là hoạt động của bố cục vượt quá 1600 dp. Nó phải hoạt động như khuyến nghị cho mọi thiết bị trong hướng dẫn Chỉ số thiết bị .

Dưới đây được thực hiện bởi hệ thống MUI Grid hoàn toàn ,

Với đoạn mã dưới đây,

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

Đây là câu hỏi cũ nhưng google đưa tôi đến đây. Sau một hồi tìm kiếm, tôi đã tìm thấy một gói tốt: https://www.npmjs.com/package/react-grid-system

Tôi nghĩ đây là tốt nhất, dễ sử dụng và nhẹ.

Đây là ví dụ về hệ thống lưới với material-ui tương tự như 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>