UI วัสดุและระบบกริด


118

ฉันกำลังเล่นกับMaterial-UIอยู่นิดหน่อย มีตัวเลือกใดบ้างสำหรับการสร้างเค้าโครงกริด (เช่นในBootstrap ) หรือไม่?

ถ้าไม่วิธีเพิ่มฟังก์ชันนี้คืออะไร?

มีส่วนประกอบ GridListแต่ฉันเดาว่ามันมีจุดประสงค์ที่แตกต่างกัน


อย่าคิดว่ามันมีส่วนประกอบใด ๆ ในการสร้างกริดที่ตอบสนอง
Lucky Chingi

คำตอบอยู่ที่นี่github.com/callemall/material-ui/issues/190
kharandziuk

คำตอบ:


127

วัสดุ UI ได้ดำเนินการรูปแบบ flexbox ของตัวเองผ่านทางส่วนประกอบกริด

ดูเหมือนว่าในตอนแรกพวกเขาต้องการให้ตัวเองเป็นไลบรารี 'ส่วนประกอบ' ล้วนๆ แต่หนึ่งในนักพัฒนาหลักตัดสินใจว่ามันเป็นสิ่งสำคัญมากเกินไปไม่ได้ที่จะมีของตัวเอง มันได้รับในขณะนี้รวมเข้าไปในรหัสหลักและถูกปล่อยออกมา v1.0.0

คุณสามารถติดตั้งผ่าน:

npm install @material-ui/core

ตอนนี้มันเป็นอย่างเป็นทางการในเอกสารที่มีตัวอย่างรหัส


ฉันเห็นคุณโพสต์คำตอบที่ฉันเพิ่งจะเพิ่ม! ฮ่า ๆ. เพียงตอบกลับความคิดเห็นของคุณเกี่ยวกับคำตอบชั้นนำในปัจจุบัน
Cleanshooter

เพิ่งติดตั้งและใช้สาขาอัลฟาของ UI วัสดุตอนนี้ สามารถยืนยันได้ว่าระบบ Layout ทำงานได้ดี.
user2875289

3
ระบบตารางการทำงานได้ดี Select Fieldแต่มีบางส่วนที่ยังไม่ได้รับการดำเนินการยังเหมือน ฉันติดอยู่กับวิธีการใช้ฟิลด์ดังกล่าว คุณช่วยฉันผ่านสิ่งนี้ได้ไหม
Suresh Mainali

1
ฉันเห็นด้วยกับ @SureshMainali เพราะฉันก็ประสบปัญหาเดียวกันเช่นกัน ส่วนประกอบส่วนใหญ่มีอุปกรณ์ประกอบฉากที่ขาดหายไปและแม้กระทั่งเกี่ยวกับการใช้งานธีมที่กำหนดเองด้วยเช่นกัน
Sai Ram

@ SaiRam ฉันจะไม่พูดมากที่สุด แต่จริงๆแล้วสิ่งที่Selectขาดหายไปฉันเพิ่งแทนที่ด้วยปุ่มตัวเลือกในตอนนี้ แต่ฉันแน่ใจว่าอีกไม่นานก่อนที่การเลือกจะถูกย้ายจากลำตัว
icc97

35

จากคำอธิบายรายละเอียดการออกแบบวัสดุ :

Grid Lists เป็นอีกทางเลือกหนึ่งของมุมมองรายการมาตรฐาน รายการตารางแตกต่างจากกริดที่ใช้สำหรับเค้าโครงและการนำเสนอภาพอื่น ๆ

หากคุณกำลังมองหาไลบรารีส่วนประกอบ Grid ที่มีน้ำหนักเบาฉันใช้React-Flexbox-Gridซึ่งเป็นการนำไปใช้flexboxgrid.cssใน React

ยิ่งไปกว่านั้นReact-Flexbox-Gridเล่นได้ดีกับทั้งmaterial-uiและreact-toolbox (การใช้งานการออกแบบวัสดุทางเลือก)


32
React-Flexbox-Grid ถูกนำไปใช้งานไม่ดีในช่วงเวลาของโพสต์นี้และต้องใช้การอ้างอิงจากภายนอกจำนวนมากเพื่อให้ทำงานได้อย่างถูกต้อง นอกจากนี้ @Roylee เป็นผู้พัฒนา ... ดังนั้นความคิดเห็นของเขาก็ค่อนข้างเอนเอียงอยู่ดี;) ...
Cleanshooter

1
นอกจากนี้ react-flexbox-grid ยังขึ้นอยู่กับ flexboxgrid ซึ่งไม่ใช้เบรกพอยต์แบบตอบสนองเดียวกันที่แนะนำในดีไซน์ Material ดู: material.io/guidelines/layout/…
Ken Gregory

@Cleanshooter นี่จะเป็นรุ่นแข่งขันของคุณหรือไม่? บางทีคุณก็ลำเอียงไปหน่อย :)
icc97

@ icc97 ใช่และไม่ใช่ ไม่ได้ตั้งใจจะ "แข่งขัน" จริงๆมันเป็นช่องว่างในการหยุดชะงักของแอปที่ฉันกำลังสร้าง ฉันทำอย่างนั้นหลังจากผิดหวังกับทั้งคู่ ... มันไม่สำคัญอีกต่อไปแล้วเพราะพวกที่ CallEmA รวมระบบกริดไว้ใน Material-UI รุ่นล่าสุด ฉันยังไม่ได้ลองเป็นการส่วนตัว github.com/callemall/material-ui/pull/5808
Cleanshooter

1
@Cleanshooter คุณดูดีทีเดียว ฉันได้ทำการทดสอบตาราง Material-UI ใหม่แล้วและมันก็ใช้งานได้ดี
icc97

20

ฉันมองไปรอบ ๆ เพื่อหาคำตอบสำหรับสิ่งนี้และวิธีที่ดีที่สุดที่ฉันพบคือการใช้ Flex และการจัดแต่งทรงผมแบบอินไลน์กับส่วนประกอบต่างๆ

ตัวอย่างเช่นในการทำให้ส่วนประกอบกระดาษสองชิ้นแบ่งเต็มหน้าจอของฉันออกเป็น 2 ส่วนแนวตั้ง (ปันส่วน 1: 4) รหัสต่อไปนี้ก็ใช้ได้ดี

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

ตอนนี้ด้วยการคำนวณเพิ่มเติมคุณสามารถแบ่งส่วนประกอบของคุณบนหน้าได้อย่างง่ายดาย

อ่านเพิ่มเติมเกี่ยวกับ flex


2
ฉันเห็นด้วยการใช้คุณสมบัติ flex css ส่งมอบการจัดรูปแบบง่ายๆที่ฉันต้องการ
James Gentes

11

ฉันหวังว่านี่จะไม่สายเกินไปที่จะตอบกลับ

ฉันยังมองหา bootstrap ที่เรียบง่ายแข็งแกร่งยืดหยุ่นและปรับแต่งได้สูงเช่นระบบ react grid เพื่อใช้ในโครงการของฉัน

สิ่งที่ดีที่สุดที่ฉันรู้คือreact-pure-grid https://www.npmjs.com/package/react-pure-grid

react-pure-grid ช่วยให้คุณสามารถปรับแต่งทุกแง่มุมของระบบกริดของคุณในขณะเดียวกันก็มีค่าเริ่มต้นในตัวซึ่งอาจเหมาะกับโครงการใด ๆ

การใช้

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

8

วิธีที่ฉันทำคือไปที่http://getbootstrap.com/customize/และเลือกเฉพาะ "ระบบกริด" เพื่อดาวน์โหลด มีbootstrap-theme.cssและbootstrap.cssในไฟล์ที่ดาวน์โหลดและฉันต้องการเพียงไฟล์หลัง

ด้วยวิธีนี้ฉันสามารถใช้ระบบกริดของ Bootstrap กับทุกสิ่งทุกอย่างจาก UI วัสดุ


5

ฉันใช้https://react-bootstrap.github.io/สำหรับ Responsive Layout และ Material-ui สำหรับส่วนประกอบทั้งหมด


3
ฉันเดาว่ามันหนักไปหน่อย :) มีวิธีที่จะรวมเฉพาะสไตล์ที่เกี่ยวข้องกับกริดหรือไม่?
kharandziuk

2
ดังนั้นการใช้ React-Bootstrap ยังคงต้องรวมไฟล์ css ที่เกี่ยวข้อง จากgetbootstrap.com/customizeคุณสามารถปรับแต่งเพื่อรวมระบบ Grid และใช้เวอร์ชันย่อของมัน ~
yuchien

5

ฉันพบปัญหาในการหาเฟรมเวิร์ก UI ที่จะใช้มาตรฐานของดีไซน์ Material สำหรับพฤติกรรมที่ตอบสนองดังนั้นฉันจึงสร้างแพ็คเกจสองชุดที่ใช้ระบบกริดสำหรับการออกแบบวัสดุ:

  1. เฟรมเวิร์ก CSS: material-responsive-grid
  2. ชุดของ React ส่วนประกอบที่ใช้กรอบ: ตอบสนองวัสดุที่ตอบสนองต่อตาราง

แพ็กเกจเหล่านี้เป็นไปตามมาตรฐานสำหรับUI ที่ตอบสนองที่ Google ระบุไว้ ขนาดวิวพอร์ตทั้งหมดที่ระบุในมาตรฐานได้รับการสนับสนุนโดยคำนึงถึงรางน้ำที่เหมาะสมจำนวนคอลัมน์ที่แนะนำและแม้กระทั่งลักษณะการทำงานของเลย์เอาต์ที่เกิน 1600 dp ควรทำงานตามที่แนะนำสำหรับทุกอุปกรณ์ในคู่มือเมตริกอุปกรณ์


1

ด้านล่างจะทำโดยหมดจดระบบ MUI กริด ,

MUI - เค้าโครงกริด

ด้วยรหัสด้านล่าง

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

↓โค้ดแซนด์บ็อกซ์↓

แก้ไขระบบ MUI-Grid


0

นี่เป็นคำถามเก่า แต่ google พาฉันมาที่นี่ หลังจากค้นหาเล็กน้อยฉันพบแพ็คเกจที่ดี: https://www.npmjs.com/package/react-grid-system

ฉันคิดว่านี่เป็นสิ่งที่ดีที่สุดใช้งานง่ายและมีน้ำหนักเบา


0

นี่คือตัวอย่างของระบบกริดที่มี material-ui ซึ่งคล้ายกับ 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>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.