উপাদান ইউআই এবং গ্রিড সিস্টেম

Question

আমি ম্যাটারিয়াল-ইউআই দিয়ে কিছুটা খেলছি । গ্রিড লেআউট ( বুটস্ট্র্যাপের মতো ) তৈরি করার জন্য কি কোনও বিকল্প আছে ?

যদি তা না হয় তবে এই কার্যকারিতা যুক্ত করার উপায় কী?

একটি গ্রিডলিস্ট উপাদান রয়েছে তবে আমার ধারণা এটির কিছু আলাদা উদ্দেশ্য রয়েছে।

Comments

প্রতিক্রিয়াশীল গ্রিডগুলি তৈরি করতে এর কোনও উপাদান রয়েছে বলে মনে করবেন না।

— লাকি চিংগি

উত্তরটি এখানে রয়েছে github.com/callemall/matory-ui/issues/190

— খারান্দজুক

Answer 1

ম্যাটেরিয়াল ইউআই গ্রিড উপাদানটির মাধ্যমে তাদের নিজস্ব ফ্লেক্সবক্স লেআউটটি প্রয়োগ করেছে ।

এটি প্রদর্শিত হয় যে তারা প্রাথমিকভাবে নিজেদেরকে একটি 'উপাদান' লাইব্রেরি হিসাবে রাখতে চেয়েছিল । তবে মূল বিকাশকারীদের মধ্যে একটি সিদ্ধান্ত নিয়েছে যে তাদের নিজস্ব না থাকা খুব গুরুত্বপূর্ণ । এটি এখন মূল কোডে একীভূত হয়েছে এবং v1.0.0 এর সাথে প্রকাশিত হয়েছে ।

আপনি এটির মাধ্যমে এটি ইনস্টল করতে পারেন:

npm install @material-ui/core

কোডের উদাহরণ সহ এটি এখন অফিসিয়াল ডকুমেন্টেশনে রয়েছে ।

Comments

আমি আপনাকে উত্তরটি পোস্ট করতে দেখছি আমি কেবল যুক্ত করতে যাচ্ছি! হাঃ হাঃ হাঃ. কেবলমাত্র বর্তমান নেতৃস্থানীয় উত্তরের উপর আপনার মন্তব্যে প্রতিক্রিয়া জানালাম।

— ক্লিনশুটার

এখনই ম্যাটেরিয়াল ইউআইয়ের আলফা শাখা ইনস্টল এবং ব্যবহার করা হয়েছে। লেআউট সিস্টেমটি ভালভাবে কাজ করে তা নিশ্চিত করতে পারে।

— ব্যবহারকারী 2875289

গ্রিড সিস্টেমটি ভালভাবে কাজ করে তবে, কিছু উপাদান রয়েছে যা এখনও কার্যকর হয়নি, যেমন Select Field। এই জাতীয় ক্ষেত্র কীভাবে ব্যবহার করতে হয় সে সম্পর্কে আমি আটকে আছি। আপনি কি এর মাধ্যমে আমাকে সাহায্য করতে পারেন?

— সুরেশ মইনালি

আমি @ সুরেশমৈনালীর সাথে একমত হই কারণ আমিও একই সমস্যার মুখোমুখি হয়েছি। বেশিরভাগ উপাদানগুলির প্রপসগুলি অনুপস্থিত এবং এমনকি কাস্টম থিম বাস্তবায়নের বিষয়েও রয়েছে

— সাঁই রাম

@ সাইরাম আমি বেশিরভাগই বলব না, তবে প্রকৃতপক্ষে এটি Selectঅনুপস্থিত, আমি এখনই এটির জন্য রেডিও বোতামগুলি দিয়ে প্রতিস্থাপন করেছি, তবে আমি নিশ্চিত যে ট্রাঙ্ক থেকে নির্বাচনটি পোর্ট করার আগে এটি দীর্ঘ হবে না।

— icc97

Answer 2

উপাদান নকশা চশমা বর্ণনা থেকে :

গ্রিড তালিকাগুলি স্ট্যান্ডার্ড তালিকা দর্শনগুলির বিকল্প। গ্রিডের তালিকাগুলি লেআউট এবং অন্যান্য ভিজ্যুয়াল উপস্থাপনার জন্য ব্যবহৃত গ্রিড থেকে পৃথক।

আপনি যদি অনেক বেশি লাইটওয়েট গ্রিড উপাদান লাইব্রেরি খুঁজছেন, আমি রিএ্যাক্ট-ফ্লেক্সবক্স-গ্রিড ব্যবহার করছি, প্রতিক্রিয়া বাস্তবায়ন flexboxgrid.css।

তার উপরে, প্রতিক্রিয়া-ফ্লেক্সবক্স-গ্রিড দুটি উপাদান-ইউআই , এবং প্রতিক্রিয়া-টুলবাক্স (বিকল্প উপাদান নকশা বাস্তবায়নের) সাথে দুর্দান্ত খেলেছে ।

Comments

প্রতিক্রিয়া-ফ্লেক্সবক্স-গ্রিডটি এই পোস্টের সময় খারাপভাবে প্রয়োগ করা হয়েছে এবং সঠিকভাবে কাজ করার জন্য অনেক বাহ্যিক নির্ভরতা প্রয়োজন requires প্লাস, @ রইলি এটির বিকাশকারী ... সুতরাং তার মতামত যাইহোক কিছুটা পক্ষপাতদুষ্ট;) ...

— ক্লিনশুটার

এছাড়াও, প্রতিক্রিয়া-ফ্লেক্সবক্স-গ্রিড ফ্লেক্সবক্সগ্রিডের উপর নির্ভর করে, যা ম্যাটেরিয়াল ডিজাইনে প্রস্তাবিত একই প্রতিক্রিয়াশীল ব্রেকপয়েন্টগুলি ব্যবহার করে না। দেখুন: উপাদান.

— কেন গ্রেগরি

@ ক্লিনশুটার কি এটি আপনার প্রতিযোগিতামূলক সংস্করণ হবে ? সম্ভবত আপনিও কিছুটা পক্ষপাতদুষ্ট :)

— icc97

@ আইসিসি ৯7 হ্যাঁ এবং না। সত্যই "প্রতিযোগিতা" করার ইচ্ছা ছিল না এটি আমি তৈরি করা অ্যাপ্লিকেশনটির জন্য স্টপ ফাঁক ছিল of আমি উভয়ের সাথে হতাশ হওয়ার পরে ... এটি সত্যিই আর কিছু যায় আসে না কারণ কলইমএল-এ থাকা ছেলেরা মেটেরিয়াল-ইউআইয়ের সর্বশেষ সংস্করণে একটি গ্রিড সিস্টেম অন্তর্ভুক্ত করেছিল। যদিও আমি এখনও ব্যক্তিগতভাবে এটি চেষ্টা করি নি। github.com/callemall/matory-ui/pull/5808

— ক্লিনশুটার

ক্লিনশুটারটি আপনার সুন্দর দেখাচ্ছে আমি নতুন মেটেরিয়াল-ইউআই গ্রিড পরীক্ষা করে দেখছি এবং এটি এখনও পর্যন্ত ভাল কাজ করছে।

— 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

আমি সম্মত, ফ্লেক্স সিএসএস বৈশিষ্ট্যগুলি ব্যবহার করে আমার প্রয়োজনীয় সাধারণ ফর্ম্যাটিং সরবরাহ করে।

— জেমস জেনেটস

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

আমার ধারণা এটি সামান্য ভারী ওজন :) কেবল গ্রিড-সম্পর্কিত শৈলী অন্তর্ভুক্ত করার কোনও উপায় আছে কি?

— খারান্দিজিয়ুক

সুতরাং প্রতিক্রিয়া-বুটস্ট্র্যাপ ব্যবহারের জন্য এখনও প্রাসঙ্গিক সিএসএস ফাইল অন্তর্ভুক্ত করা দরকার। Getbootstrap.com/customize থেকে আপনি কেবল গ্রিড সিস্টেম অন্তর্ভুক্ত করতে কাস্টমাইজ করতে পারেন এবং এর একটি সংক্ষিপ্ত সংস্করণ ব্যবহার করেছেন ~

— ইয়ুচিয়েন

Answer 7

প্রতিক্রিয়াশীল আচরণের জন্য মেটালিয়াল ডিজাইনের মান প্রয়োগ করতে পারে এমন একটি ইউআই কাঠামো খুঁজে পেতে আমার অসুবিধা হয়েছিল, সুতরাং আমি দুটি প্যাকেজ তৈরি করেছি যা মেটেরিয়াল ডিজাইনের জন্য গ্রিড সিস্টেম প্রয়োগ করে:

1. একটি সিএসএস ফ্রেমওয়ার্ক: উপাদান-প্রতিক্রিয়াশীল-গ্রিড
2. প্রতিক্রিয়া উপাদানগুলির একটি সেট যা এই কাঠামোটি কার্যকর করে: প্রতিক্রিয়া-উপাদান-প্রতিক্রিয়াশীল-গ্রিড ।

এই প্যাকেজগুলি গুগল দ্বারা বর্ণিত প্রতিক্রিয়াশীল UI এর মান অনুসরণ করে । তাদের মানগুলিতে নির্দিষ্ট সমস্ত ভিউপোর্ট মাপগুলি সঠিক জলের জন্য প্রস্তাবিত সংখ্যক কলাম, এবং এমনকি 1600 ডিপি ছাড়িয়ে যাওয়া বিন্যাসের আচরণের জন্য বিবেচনা করে সমর্থিত। এটি ডিভাইস মেট্রিক্স গাইডের প্রতিটি ডিভাইসের জন্য প্রস্তাবিত হিসাবে আচরণ করা উচিত ।

Answer 8

নিচে বিশুদ্ধ এমইউআই গ্রিড সিস্টেম দ্বারা তৈরি করা হয়েছে ,

নীচের কোড সহ,

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

↓ কোডস্যান্ডবক্স ↓

Answer 9

এটি পুরানো প্রশ্ন তবে গুগল আমাকে এখানে নিয়ে আসে। একটু অনুসন্ধানের পরে আমি একটি ভাল প্যাকেজ পেয়েছি: https://www.npmjs.com/package/react-grid-s systemm

আমি মনে করি এটি সর্বোত্তম, সহজেই ব্যবহারযোগ্য এবং হালকা ওজন।

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>