मैं सामग्री यूआई में एक मेनू/ड्रॉप डाउन बनाने की कोशिश कर रहा हूं जो ग्रिड के आकार में है। दस्तावेज़ीकरण में मैंने जो ड्रॉप डाउन देखे हैं, वे या तो एकल स्तंभ या एकल पंक्ति हैं। मैंने एक मेनू घटक का उपयोग करके इस पर एक स्टैब लिया है जिसमें GridList है और यह लगभग मेरे लिए काम करता है लेकिन ग्रिड बहुत चौड़ा है और कॉलम के बीच बहुत अधिक जगह है। मैंने GridListItem और Grid कंटेनर और GridItem का उपयोग करने की कोशिश की है, लेकिन मुझे एक ही समस्या का सामना करना पड़ा है।

   <Menu
        anchorEl={anchorEl}
        keepMounted
        open={open}
        onClose={handleClose}
        elevation={0}
        getContentAnchorEl={null}
        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
        transformOrigin={{ vertical: "top", horizontal: "left" }}
        TransitionComponent={Fade}
      >
        <GridList cellHeight={48} cols={2}>
          <Button onClick={(e) => handleClose(LayoutIcons.L_1x1)}>
            {GetGroupIcon(LayoutIcons.L_1x1)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_2x2)}>
            {GetGroupIcon(LayoutIcons.L_2x2)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
            {GetGroupIcon(LayoutIcons.L_5x5)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
            {GetGroupIcon(LayoutIcons.L_5x5)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
            {GetGroupIcon(LayoutIcons.L_5x5)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
            {GetGroupIcon(LayoutIcons.L_5x5)}
          </Button>
        </GridList>
      </Menu>

नमूना ग्रिड ड्रॉप डाउन के लिए कोडसैंडबॉक्स

इसमें खुदाई करने के बाद मैंने पाया कि ग्रिड की चौड़ाई सभी तत्वों की चौड़ाई का योग है क्योंकि यह फ्लेक्स को डिस्प्ले के रूप में उपयोग कर रही है (मेरे उदाहरण कोड में यह 6 है लेकिन मेरे समाधान के लिए किसी भी संख्या में तत्वों और स्तंभों की सामान्य ग्रिड की आवश्यकता है) . ग्रिड तब स्तंभों की संख्या के आधार पर प्रत्येक तत्व की चौड़ाई निर्धारित करता है। मेरे पास 2 कॉलम हैं इसलिए प्रत्येक तत्व की चौड़ाई 50% पर सेट है। यह प्रति पंक्ति 2 तत्व प्रदान करता है लेकिन प्रत्येक तत्व को बहुत विस्तृत बनाता है।

मैं तत्व की चौड़ाई को कसने के लिए एक सामग्री यूआई समाधान की तलाश कर रहा हूं ताकि प्रत्येक आइटम उतना ही दूर हो जब मैं अपने उदाहरण कोड में कॉलम की संख्या 6 पर सेट करता हूं। मैं GridList या Grid या पूरी तरह से अलग दृष्टिकोण का उपयोग करके समायोजन के साथ ठीक हूं, जब तक कि यह सामग्री UI घटकों का उपयोग कर रहा हो।

1
MacD 10 अक्टूबर 2020, 04:07

1 उत्तर

सबसे बढ़िया उत्तर

div जैसे ब्लॉक तत्वों का प्रयोग करें। प्रत्येक पंक्ति को किसी अन्य ब्लॉक तत्व में बंद करें। यदि आपको अधिक रिक्ति की आवश्यकता है तो मार्जिन जोड़ें

<div>
  <div>
    <Button onClick={(e) => handleClose(LayoutIcons.L_1x1)}>
      {GetGroupIcon(LayoutIcons.L_1x1)}
    </Button>
    <Button onClick={(e) => handleClose(LayoutIcons.L_2x2)}>
      {GetGroupIcon(LayoutIcons.L_2x2)}
    </Button>
  </div>
  <div>
    <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
      {GetGroupIcon(LayoutIcons.L_5x5)}
    </Button>
    <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
      {GetGroupIcon(LayoutIcons.L_5x5)}
    </Button>
  </div>
  <div>
    <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
      {GetGroupIcon(LayoutIcons.L_5x5)}
    </Button>
    <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
      {GetGroupIcon(LayoutIcons.L_5x5)}
    </Button>
  </div>
</div>

Edit Square Menu Grid Example (forked)

2
95faf8e76605e973 10 अक्टूबर 2020, 15:48