मैंने प्रतिक्रिया में एक आवेदन किया और अपने घटकों को डिजाइन करने के लिए लाइब्रेरी ग्रोमेट का उपयोग किया। मैंने विभिन्न मोबाइल उपकरणों के लिए ब्रेकप्वाइंट सेट करने के लिए एक थीम फ़ाइल परिभाषित की है:

const customBreakpoints = deepMerge(grommet, {
  global: {
    breakpoints: {
      small: {
        value: 768,
        borderSize: {
          xsmall: "1px",
          small: "2px",
          medium: "4px",
          large: "6px",
          xlarge: "12px"
        },
        edgeSize: {
          none: "0px",
          hair: "1px",
          xxsmall: "2px",
          xsmall: "3px",
          small: "6px",
          medium: "12px",
          large: "24px",
          xlarge: "48px"
        },
        size: {
          xxsmall: "24px",
          xsmall: "48px",
          small: "96px",
          medium: "192px",
          large: "384px",
          xlarge: "768px",
          full: "100%"
        }
      },
      medium: { value: 1536 },
      large: {}
    }
  }
});

बटनों को लेआउट करने के लिए मैंने ग्रोमेट्स बॉक्स घटक का उपयोग किया:

const App = () => (
  <Grommet theme={customBreakpoints}>
    <ResponsiveContext.Consumer>
      {size => (
        <div>
          <Box
            direction="column"
            align="center"
            gap="medium"
            pad="small"
            overflow={{
              horizontal: "auto"
            }}
          >
            <Button
              primary
              hoverIndicator="true"
              style={{
                width: "100%"
              }}
              label="Next"
            />
            <Box width="medium" direction="row-responsive">
              <Button
                primary
                icon={<DocumentPdf color="white" />}
                style={{
                  boxSizing: "border-box",
                  background: "red",
                  height: "38px",
                  lineHeight: "24px",
                  fontSize: "18px",
                  fontWeight: 600,
                  paddingLeft: "20px",
                  paddingRight: "20px"
                }}
                label="Export PDF"
              />

              <Button
                primary
                icon={<DocumentPdf color="white" />}
                style={{
                  boxSizing: "border-box",
                  background: "red",
                  height: "38px",
                  lineHeight: "24px",
                  fontSize: "18px",
                  fontWeight: 600,
                  paddingLeft: "20px",
                  paddingRight: "20px"
                }}
                label="Export all"
              />
            </Box>
          </Box>
        </div>
      )}
    </ResponsiveContext.Consumer>
  </Grommet>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

जब मैं एप्लिकेशन चलाता हूं और विभिन्न उपकरणों पर अपनी वर्तमान विंडो का निरीक्षण करता हूं तो मुझे निम्न आउटपुट मिलता है:

enter image description here

तथा

enter image description here

यहां तक ​​कि ResponsiveContext.Consumer और चौड़ाई = आकार} के साथ भी यह काम नहीं किया।

कोई सुझाव?

मैंने एक सैंडबॉक्स< बनाया है /ए> उदाहरण।

1
Preefix 15 जुलाई 2020, 21:21

1 उत्तर

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

बटन लेआउट के ड्राइवर नहीं हैं, और उनके लेआउट को रैपर लेआउट घटक द्वारा नियंत्रित किया जाता है, आपके मामले में, यह कोडसैनबॉक्स पर ग्रोमेट घटक के नीचे बॉक्स घटक है।

बॉक्स घटक स्वचालित रूप से आपके द्वारा परिभाषित कस्टम ब्रेकप्वाइंट के लिए उत्तरदायी है और यह अपेक्षित रूप से काम करता प्रतीत होता है, कहा जा रहा है, ग्रोमेट बॉक्स ब्रेकपॉइंट परिभाषाओं से अच्छी तरह से गणना करता है कि आपका ऐप वैसे भी डिफ़ॉल्ट रूप से उपयोग करेगा, इसलिए जब तक आपके कस्टम ब्रेकप्वाइंट के लिए विशेष आवश्यकताएं, डिफ़ॉल्ट का उपयोग करके आमतौर पर चाल चलती है और जटिलता को दूर करती है।

आपका कोड ResponsiveContext आयात कर रहा था, लेकिन ResponsiveContext लेआउट घटक को लपेट नहीं रहा था, और यह आकार प्रोप का उपयोग नहीं करता था, इसलिए एक बार उन्हें जोड़ने के बाद मुझे लगता है कि यह अपेक्षा के अनुरूप काम करता है। मैंने केवल div को ResponsiveContext से बदल दिया (बॉक्स का उपयोग करते समय div की आवश्यकता नहीं है), और size और width को बॉक्स में निम्नानुसार जोड़ा गया है:

    <ResponsiveContext.Consumer>
      {size => (
        <Box
          direction="column"
          align="center"
          gap="medium"
          pad="small"
          overflow={{
            horizontal: "auto"
          }}
          width={size==="small" ? "200px" : "400px"}
        >
   ...

अपने सैंडबॉक्स में उपरोक्त कोड भाग का उपयोग करने से आपको एक बेहतर विचार मिलेगा कि उत्तरदायी तरीके से बटनों को कैसे नियंत्रित किया जाए। आप width प्रोप पर मूल्यों के साथ खेल सकते हैं जैसा कि आप फिट देखते हैं, वर्तमान में, यह 'छोटे' स्क्रीन आकार पर बटन की चौड़ाई 200px पर सेट करता है, और अन्यथा 400px का उपयोग करता है (मैंने यादृच्छिक मान चुना है), और आप तर्क और मूल्यों के साथ खेल सकते हैं जैसा कि आप फिट देखते हैं। जैसा कि आपने सुझाव दिया है, आप width={size} का भी उपयोग कर सकते हैं और यह चौड़ाई के आकार को ब्रेकपॉइंट मान ('छोटा', ​​'मध्यम', 'बड़ा'...)

यहाँ पूरा कोड उदाहरण है:

import React from "react";
import ReactDOM from "react-dom";
import { Box, Button, Grommet, ResponsiveContext } from "grommet";
import { DocumentPdf } from "grommet-icons";

import { deepMerge } from "grommet/utils";
import { grommet } from "grommet/themes";

import "./styles.css";

const customBreakpoints = deepMerge(grommet, {
  global: {
    breakpoints: {
      small: {
        value: 368,
        borderSize: {
          xsmall: "1px",
          small: "2px",
          medium: "4px",
          large: "6px",
          xlarge: "12px"
        },
        edgeSize: {
          none: "0px",
          hair: "1px",
          xxsmall: "2px",
          xsmall: "3px",
          small: "6px",
          medium: "12px",
          large: "24px",
          xlarge: "48px"
        },
        size: {
          xxsmall: "24px",
          xsmall: "48px",
          small: "96px",
          medium: "192px",
          large: "384px",
          xlarge: "768px",
          full: "100%"
        }
      },
      medium: {
        value: 768,
        borderSize: {
          xsmall: "2px",
          small: "4px",
          medium: "8px",
          large: "12px",
          xlarge: "16px"
        },
        edgeSize: {
          none: "0px",
          hair: "1px",
          xxsmall: "2px",
          xsmall: "3px",
          small: "6px",
          medium: "12px",
          large: "24px",
          xlarge: "48px"
        },
        size: {
          xxsmall: "48px",
          xsmall: "96px",
          small: "192px",
          medium: "384px",
          large: "768px",
          xlarge: "1200px",
          full: "100%"
        }
      },
      large: {}
    }
  }
});

const App = () => (
  <Grommet theme={customBreakpoints}>
    <ResponsiveContext.Consumer>
      {size => (
        <Box
          direction="column"
          align="center"
          gap="medium"
          pad="small"
          overflow={{
            horizontal: "auto"
          }}
          width={size==="small" ? "200px" : "400px"}
        >
          <Button
            primary
            hoverIndicator="true"
            style={{
              width: "100%"
            }}
            label="Next"
          />

          <Button
            primary
            icon={<DocumentPdf color="white" />}
            style={{
              width: "100%"
            }}
            label="Export PDF"
          />

          <Button
            primary
            icon={<DocumentPdf color="white" />}
            style={{
              width: "100%"
            }}
            label="Export all"
          />
        </Box>
      )}
    </ResponsiveContext.Consumer>
  </Grommet>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

उम्मीद है ये मदद करेगा।

1
Shimi 16 जुलाई 2020, 01:22