ฉันกำลังเล่นกับMaterial-UIอยู่นิดหน่อย มีตัวเลือกใดบ้างสำหรับการสร้างเค้าโครงกริด (เช่นในBootstrap ) หรือไม่?
ถ้าไม่วิธีเพิ่มฟังก์ชันนี้คืออะไร?
มีส่วนประกอบ GridListแต่ฉันเดาว่ามันมีจุดประสงค์ที่แตกต่างกัน
ฉันกำลังเล่นกับMaterial-UIอยู่นิดหน่อย มีตัวเลือกใดบ้างสำหรับการสร้างเค้าโครงกริด (เช่นในBootstrap ) หรือไม่?
ถ้าไม่วิธีเพิ่มฟังก์ชันนี้คืออะไร?
มีส่วนประกอบ GridListแต่ฉันเดาว่ามันมีจุดประสงค์ที่แตกต่างกัน
คำตอบ:
วัสดุ UI ได้ดำเนินการรูปแบบ flexbox ของตัวเองผ่านทางส่วนประกอบกริด
ดูเหมือนว่าในตอนแรกพวกเขาต้องการให้ตัวเองเป็นไลบรารี 'ส่วนประกอบ' ล้วนๆ แต่หนึ่งในนักพัฒนาหลักตัดสินใจว่ามันเป็นสิ่งสำคัญมากเกินไปไม่ได้ที่จะมีของตัวเอง มันได้รับในขณะนี้รวมเข้าไปในรหัสหลักและถูกปล่อยออกมา v1.0.0
คุณสามารถติดตั้งผ่าน:
npm install @material-ui/core
Select Field
แต่มีบางส่วนที่ยังไม่ได้รับการดำเนินการยังเหมือน ฉันติดอยู่กับวิธีการใช้ฟิลด์ดังกล่าว คุณช่วยฉันผ่านสิ่งนี้ได้ไหม
Select
ขาดหายไปฉันเพิ่งแทนที่ด้วยปุ่มตัวเลือกในตอนนี้ แต่ฉันแน่ใจว่าอีกไม่นานก่อนที่การเลือกจะถูกย้ายจากลำตัว
จากคำอธิบายรายละเอียดการออกแบบวัสดุ :
Grid Lists เป็นอีกทางเลือกหนึ่งของมุมมองรายการมาตรฐาน รายการตารางแตกต่างจากกริดที่ใช้สำหรับเค้าโครงและการนำเสนอภาพอื่น ๆ
หากคุณกำลังมองหาไลบรารีส่วนประกอบ Grid ที่มีน้ำหนักเบาฉันใช้React-Flexbox-Gridซึ่งเป็นการนำไปใช้flexboxgrid.css
ใน React
ยิ่งไปกว่านั้นReact-Flexbox-Gridเล่นได้ดีกับทั้งmaterial-uiและreact-toolbox (การใช้งานการออกแบบวัสดุทางเลือก)
ฉันมองไปรอบ ๆ เพื่อหาคำตอบสำหรับสิ่งนี้และวิธีที่ดีที่สุดที่ฉันพบคือการใช้ 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>
)
}
}
ตอนนี้ด้วยการคำนวณเพิ่มเติมคุณสามารถแบ่งส่วนประกอบของคุณบนหน้าได้อย่างง่ายดาย
ฉันหวังว่านี่จะไม่สายเกินไปที่จะตอบกลับ
ฉันยังมองหา 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>
);
วิธีที่ฉันทำคือไปที่http://getbootstrap.com/customize/และเลือกเฉพาะ "ระบบกริด" เพื่อดาวน์โหลด มีbootstrap-theme.css
และbootstrap.css
ในไฟล์ที่ดาวน์โหลดและฉันต้องการเพียงไฟล์หลัง
ด้วยวิธีนี้ฉันสามารถใช้ระบบกริดของ Bootstrap กับทุกสิ่งทุกอย่างจาก UI วัสดุ
ฉันใช้https://react-bootstrap.github.io/สำหรับ Responsive Layout และ Material-ui สำหรับส่วนประกอบทั้งหมด
ฉันพบปัญหาในการหาเฟรมเวิร์ก UI ที่จะใช้มาตรฐานของดีไซน์ Material สำหรับพฤติกรรมที่ตอบสนองดังนั้นฉันจึงสร้างแพ็คเกจสองชุดที่ใช้ระบบกริดสำหรับการออกแบบวัสดุ:
แพ็กเกจเหล่านี้เป็นไปตามมาตรฐานสำหรับUI ที่ตอบสนองที่ Google ระบุไว้ ขนาดวิวพอร์ตทั้งหมดที่ระบุในมาตรฐานได้รับการสนับสนุนโดยคำนึงถึงรางน้ำที่เหมาะสมจำนวนคอลัมน์ที่แนะนำและแม้กระทั่งลักษณะการทำงานของเลย์เอาต์ที่เกิน 1600 dp ควรทำงานตามที่แนะนำสำหรับทุกอุปกรณ์ในคู่มือเมตริกอุปกรณ์
ด้านล่างจะทำโดยหมดจดระบบ 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>
);
}
↓โค้ดแซนด์บ็อกซ์↓
นี่เป็นคำถามเก่า แต่ google พาฉันมาที่นี่ หลังจากค้นหาเล็กน้อยฉันพบแพ็คเกจที่ดี: https://www.npmjs.com/package/react-grid-system
ฉันคิดว่านี่เป็นสิ่งที่ดีที่สุดใช้งานง่ายและมีน้ำหนักเบา
นี่คือตัวอย่างของระบบกริดที่มี 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>