सामग्री यूआई और ग्रिड प्रणाली

Question

मैं सामग्री-यूआई के साथ थोड़ा खेल रहा हूं । क्या ग्रिड लेआउट बनाने के लिए कोई विकल्प हैं (जैसे बूटस्ट्रैप में )?

यदि नहीं, तो इस कार्यक्षमता को जोड़ने का तरीका क्या है?

एक ग्रिडलिस्ट घटक है, लेकिन मुझे लगता है कि इसका कुछ अलग उद्देश्य है।

Comments

न लगता है कि यह उत्तरदायी ग्रिड बनाने के लिए कोई भी घटक है।

— लकी चिंगी

इसका जवाब यहाँ है github.com/callemall/material-ui/issues/190

— kharandziuk

Answer 1

सामग्री यूआई ने ग्रिड घटक के माध्यम से अपने स्वयं के फ्लेक्सबॉक्स लेआउट को लागू किया है ।

ऐसा लगता है कि वे शुरू में खुद को विशुद्ध रूप से एक 'घटक' पुस्तकालय के रूप में रखना चाहते थे । लेकिन कोर डेवलपर्स में से एक ने फैसला किया कि यह बहुत महत्वपूर्ण है कि उनका अपना न हो । अब इसे कोर कोड में मिला दिया गया है और v1.0.0 के साथ जारी किया गया है ।

आप इसे इसके माध्यम से स्थापित कर सकते हैं:

npm install @material-ui/core

यह अब कोड के उदाहरणों के साथ आधिकारिक दस्तावेज में है ।

Comments

मुझे लगता है कि आप जवाब मैं बस जोड़ने जा रहा था पोस्ट! जबरदस्त हंसी। बस वर्तमान प्रमुख उत्तर पर आपकी टिप्पणी का जवाब दिया।

— Cleanshooter

बस अब सामग्री यूआई की अल्फा शाखा का उपयोग और स्थापित किया गया है। पुष्टि कर सकते हैं कि लेआउट सिस्टम अच्छी तरह से काम करता है।

— user2875289

ग्रिड प्रणाली अच्छी तरह से काम करती है लेकिन, कुछ घटक हैं जो अभी तक लागू नहीं किए गए हैं, जैसे Select Field। मैं इस तरह के खेतों का उपयोग करने पर अड़ा हुआ हूं। क्या आप इसके जरिए मेरी मदद कर सकते हैं?

— सुरेश मैनाली

मैं @SureshMainali से सहमत हूं क्योंकि मैं भी उन्हीं मुद्दों का सामना कर रहा हूं। अधिकांश घटक गायब हो गए हैं और यहां तक ​​कि कस्टम विषय कार्यान्वयन के बारे में भी

— साईं राम

@SaiRam मैं सबसे अधिक नहीं कहूंगा, लेकिन वास्तव में Selectगायब है, मैंने इसे अभी के लिए रेडियो बटन के साथ बदल दिया है, लेकिन मुझे यकीन है कि यह ट्रंक से चयन किए जाने से पहले लंबे समय तक नहीं होगा।

— icc97

Answer 2

सामग्री डिजाइन चश्मा के विवरण से :

ग्रिड सूची मानक सूची विचारों का एक विकल्प है। ग्रिड सूची लेआउट और अन्य दृश्य प्रस्तुतियों के लिए उपयोग किए जाने वाले ग्रिड से अलग हैं।

यदि आप एक बहुत हल्के ग्रिड घटक पुस्तकालय की तलाश में हैं, तो मैं रिएक्ट-फ्लेक्सबॉक्स-ग्रिड , flexboxgrid.cssरिएक्ट के कार्यान्वयन का उपयोग कर रहा हूं ।

उसके ऊपर, रिएक्ट-फ्लेक्सबॉक्स-ग्रिड ने सामग्री-यूआई , और प्रतिक्रिया-टूलबॉक्स (वैकल्पिक सामग्री डिजाइन कार्यान्वयन) दोनों के साथ अच्छी तरह से खेला ।

Comments

रिएक्ट-फ्लेक्सबॉक्स-ग्रिड को इस पद के समय खराब रूप से लागू किया जाता है और इसे ठीक से काम करने के लिए कई बाहरी निर्भरताओं की आवश्यकता होती है। इसके अलावा, @ रोयली इसके डेवलपर हैं ... इसलिए उनकी राय कुछ भी पक्षपाती है;) ...

— क्लीनशूटर

इसके अलावा, प्रतिक्रिया-Flexbox- ग्रिड Flexboxgrid पर निर्भर करता है, जो सामग्री डिज़ाइन में अनुशंसित समान उत्तरदायी ब्रेकप्वाइंट का उपयोग नहीं करता है। देखें: material.io/guidelines/layout/…

— केन ग्रेगरी

@Cleanshooter क्या यह आपका प्रतिस्पर्धी संस्करण होगा ? शायद आप थोड़ा सा पक्षपाती भी हों :)

— icc97

@ icc97 हां और नहीं। वास्तव में "प्रतिस्पर्धा" करने का इरादा नहीं था, यह उस ऐप के लिए एक स्टॉप गैप था जो मैं निर्माण कर रहा था। मैंने ऐसा किया है कि दोनों से निराश होने के बाद ... यह वास्तव में अब और मायने नहीं रखता है क्योंकि CallEmAll पर लोगों ने सामग्री-यूआई की नवीनतम रिलीज में एक ग्रिड सिस्टम शामिल किया है। मैंने इसे व्यक्तिगत रूप से हालांकि अभी तक आज़माया नहीं है। github.com/callemall/material-ui/pull/5808

— Cleanshooter

@Cleanshooter तुम्हारा बहुत अच्छा लग रहा था। मैं नई सामग्री- UI ग्रिड का परीक्षण कर रहा हूं और यह अब तक अच्छा काम कर रहा है।

— icc97

Answer 3

मैंने इसके उत्तर के लिए चारों ओर देखा और मुझे सबसे अच्छा तरीका विभिन्न घटकों पर फ्लेक्स और इनलाइन स्टाइल का उपयोग करना था।

उदाहरण के लिए, दो पेपर घटकों को मेरी पूरी स्क्रीन को 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>
    )
  }
}

अब, कुछ और गणनाओं के साथ, आप अपने घटकों को आसानी से एक पृष्ठ पर विभाजित कर सकते हैं।

फ्लेक्स पर आगे पढ़ना

Comments

मैं सहमत हूं, फ्लेक्स सीएसएस गुणों का उपयोग करके मुझे आवश्यक सरल स्वरूपण दिया गया।

— जेम्स जेंट्स 19

Answer 4

मुझे उम्मीद है कि इस पर प्रतिक्रिया देने में देर नहीं हुई।

मैं अपनी परियोजनाओं में उपयोग करने के लिए एक सरल, मजबूत, लचीली और उच्च अनुकूलन योग्य बूटस्ट्रैप जैसे रिएक्शन ग्रिड सिस्टम की तलाश में था।

मुझे पता है कि सबसे अच्छा 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>
);

Answer 5

जिस तरह से मैं http://getbootstrap.com/customize/ पर जाता हूं और डाउनलोड करने के लिए केवल "ग्रिड सिस्टम" की जांच करता हूं । कर रहे हैं bootstrap-theme.cssऔर bootstrap.cssडाउनलोड की गई फ़ाइलों में, और मैं केवल बाद की जरूरत है।

इस तरह, मैं बूटस्ट्रैप के ग्रिड सिस्टम का उपयोग सामग्री यूआई से बाकी सब चीजों के साथ कर सकता हूं।

Answer 6

मैं बस घटक के लिए उत्तरदायी लेआउट और सामग्री-यूआई के लिए https://react-bootstrap.github.io/ का उपयोग करता हूं

Comments

मुझे लगता है कि यह थोड़ा भारी है :) क्या केवल ग्रिड से संबंधित शैलियों को शामिल करने का एक तरीका है?

— kharandziuk

इसलिए प्रतिक्रिया-बूटस्ट्रैप का उपयोग करके अभी भी प्रासंगिक सीएसएस फ़ाइल को शामिल करने की आवश्यकता है। से getbootstrap.com/customize तुम सिर्फ ग्रिड प्रणाली शामिल करने के लिए अनुकूलित है और इसका एक न्यूनतम किया गया संस्करण का उपयोग किया जा सकता है ~

— yuchien

Answer 7

मुझे यूआई फ्रेमवर्क खोजने में कठिनाई हुई जो उत्तरदायी व्यवहार के लिए सामग्री डिजाइन के मानकों को लागू करेगी, इसलिए मैंने दो पैकेज बनाए हैं जो सामग्री प्रबंधन के लिए एक ग्रिड प्रणाली लागू करते हैं:

1. एक सीएसएस फ्रेमवर्क: सामग्री-उत्तरदायी-ग्रिड
2. प्रतिक्रिया घटकों का एक सेट जो उस ढांचे को लागू करता है: प्रतिक्रिया-सामग्री-उत्तरदायी-ग्रिड ।

ये पैकेज Google द्वारा उल्लिखित उत्तरदायी UI के लिए मानकों का पालन करते हैं । उनके मानकों में निर्दिष्ट सभी व्यूपोर्ट आकार उचित गटर के लिए विचार करने, स्तंभों की अनुशंसित संख्या और यहां तक ​​कि एक लेआउट के व्यवहार के साथ समर्थित हैं जो 1600 डीपी से अधिक है। यह डिवाइस मेट्रिक्स गाइड में प्रत्येक डिवाइस के लिए अनुशंसित व्यवहार करना चाहिए ।

Answer 8

नीचे विशुद्ध रूप से 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>
  );
}

Box कोडसैंडबॉक्स box

Answer 9

यह पुराना सवाल है, लेकिन मुझे यहाँ लाने के लिए गूगल। थोड़ी खोज के बाद मुझे एक अच्छा पैकेज मिला: https://www.npmjs.com/package/react-grid-system

मुझे लगता है कि यह सबसे अच्छा, उपयोग में आसान और हल्का है।

Answer 10

यहाँ सामग्री-यूआई के साथ ग्रिड प्रणाली का उदाहरण दिया गया है जो बूटस्ट्रैप के समान है:

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