कंटेनरों के साथ रेस्पॉन्सिव डिज़ाइन

Power Apps परिचय

Luise Freese

Azure & Power Platform Architect

क्यों रेस्पॉन्सिव?

 

  • वही ऐप फोन, टैबलेट, लैपटॉप पर खुलता है
  • फिक्स्ड लेआउट छोटे स्क्रीन पर क्लिप होता है, बड़े पर खोया-खोया लगता है
  • Responsive = लेआउट एडाप्ट करता है

$$

फोन, टैबलेट और लैपटॉप पर वही ऐप, सिंगल-कॉलम से मल्टी-कॉलम में लेआउट बदलते हुए।

Power Apps परिचय

मॉडर्न लेआउट कंटेनर

वर्टिकल और हॉरिज़ॉन्टल लेआउट कंटेनरों की तुलना, जहाँ चाइल्ड कंट्रोल्स क्रमशः स्टैक्ड और साइड-बाय-साइड दिखते हैं।

 

  • Vertical layout container, बच्चों को ऊपर-से-नीचे स्टैक करता है
  • Horizontal layout container, बच्चों को बाएँ-से-दाएँ रखता है
  • मॉडर्न कंट्रोल्स उपलब्ध स्पेस में फ्लो करते हैं
Power Apps परिचय

फ्लेक्सिबल चौड़ाई और ऊँचाई

 

  • FlexibleWidth और FlexibleHeight
  • On होने पर कंट्रोल कंटेनर को भरने तक फैलता है
  • Off होने पर कंट्रोल फिक्स्ड साइज रखता है

$$

Gallery1.FlexibleHeight = true    // stretches with screen
Gallery1.FlexibleWidth  = false   // stays at fixed reading width
Power Apps परिचय

LayoutMinWidth और LayoutMinHeight

फोन बनाम टैबलेट, जहाँ LayoutMinWidth वह ब्रेकपॉइंट है जब लेआउट सिंगल-कॉलम से साइड पैनल + कंटेंट में स्विच होता है।

 

  • सही लेआउट के लिए कंटेनर को काफी स्पेस चाहिए
  • LayoutMinWidth = पुनर्व्यवस्थित होने से पहले की सबसे छोटी चौड़ाई
  • फोन बनाम टैबलेट पर अलग लेआउट ट्रिगर करता है
Power Apps परिचय

ऐप डिस्प्ले सेटिंग्स

 

  • Settings → Display से ओरिएंटेशन और साइज सेट करें
  • App layout: Fixed एक रेशियो तक जूम, Responsive स्क्रीन के अनुसार एडाप्ट
  • कई साइज पर टेस्ट करें

$$

Power Apps Studio के Settings डायलॉग में Display टैब, जहाँ लेआउट, ओरिएंटेशन और कैनवास साइज विकल्प दिखते हैं

Power Apps परिचय

प्रीडिफ़ाइंड लेआउट्स

Power Apps Studio के New screen फ़्लायआउट का वास्तविक स्क्रीनशॉट, जिसमें प्रीडिफ़ाइंड लेआउट टेम्प्लेट: Blank, Split screen, Sidebar, Header and footer, Approval request, और Welcome screen, हर एक का छोटा प्रीव्यू फ़्रेम सहित।

 

  • + New screen में प्री-बिल्ट लेआउट टेम्प्लेट आते हैं
  • Sidebar, Header and footer, Split screen, पहले से ही रेस्पॉन्सिव
  • आपकी पहली रेस्पॉन्सिव ऐप के लिए सुझाया गया शुरुआती बिंदु
Power Apps परिचय

आप क्या बनाएँगे

$$

कंट्रोल्स को Layout container में रैप करें·डिवाइस साइज बदलें·ऐप को रिस्पॉन्ड करते देखें

फोन, टैबलेट और लैपटॉप पर एक ऐप का चित्र, जहाँ गैलरी लेआउट हर स्क्रीन साइज के अनुसार एडाप्ट होता है।

Power Apps परिचय

अभ्यास करते हैं!

Power Apps परिचय

Preparing Video For Download...