बिल्डिंग यूआई
ड्रैग-एंड-ड्रॉप ऐपमास्टर वेब डिज़ाइनर के साथ सुंदर और संरचित वेब ऐप इंटरफ़ेस कैसे बनाएं, इस पर एक सरल मार्गदर्शिका।
प्रयोज्यता और संरचित इंटरफ़ेस को डिज़ाइन करने के लिए, ऐपमास्टर वेब डिज़ाइनर परमाणु यूआई घटकों की एक विस्तृत श्रृंखला प्रदान करता है। इन घटकों को आपके उद्देश्यों और लक्ष्यों के साथ संरेखित करने के लिए विभिन्न तरीकों से जोड़ा और समूहीकृत किया जा सकता है।
ऐपमास्टर निम्नलिखित यूआई घटक प्रदान करता है:
- कंटेनर: अन्य घटकों को तार्किक रूप से संरचना और समूहीकृत करने के लिए मौलिक तत्व।
- मॉडल और दराज: वर्तमान स्क्रीन को छोड़े बिना अतिरिक्त जानकारी या क्रियाएं प्रदर्शित करने के लिए इंटरैक्टिव घटक।
- गतिशील मूल्य आउटपुट घटक: डेटा को गतिशील रूप से प्रस्तुत करने के लिए सूचियाँ , ग्रिड और तालिकाएँ शामिल हैं।
- बुनियादी यूआई तत्व: जैसे बटन , टेक्स्ट और आइकन , बुनियादी इंटरफ़ेस इंटरैक्शन के लिए आवश्यक हैं।
- नेविगेशन घटक: लंबवत और क्षैतिज मेनू , टैब और समान नेविगेशनल उपकरण शामिल हैं।
- फॉर्म तत्व: उपयोगकर्ता इंटरैक्शन और डेटा संग्रह के लिए विभिन्न इनपुट और नियंत्रण।
घटक लाइब्रेरी में नियमित अपडेट वेब अनुप्रयोगों को अधिक कुशलता से विकसित करने की आपकी क्षमता को बढ़ाते हैं।
आइए ऐपमास्टर ड्रैग-एंड-ड्रॉप वेबसाइट बिल्डर की संभावनाओं को प्रदर्शित करने के लिए हमारे सरल कैलकुलेटर एप्लिकेशन के लिए एक यूआई बनाएं। यह ऐप इनपुट मानों के आधार पर विभिन्न गणितीय कार्यों के परिणाम प्रदर्शित करेगा।
फ्लेक्स कंटेनर
फ्लेक्स कंटेनर के साथ, आप एक कंटेनर के भीतर सभी चाइल्ड तत्वों के लिए संरेखण और स्टैकिंग प्रबंधन को आसानी से प्रबंधित कर सकते हैं।
फ्लेक्स कंटेनर आपके वेब पेज की संरचना बनाने के लिए एक आधार घटक है। ऐपमास्टर वेब ऐप डिज़ाइनर में फ्लेक्स कंटेनर उपयोगकर्ताओं को चाइल्ड तत्वों (विजेट या कंटेनर) को लचीले ढंग से व्यवस्थित करने की अनुमति देता है। यह क्षैतिज और ऊर्ध्वाधर दोनों संरेखण का समर्थन करता है, जिससे डेवलपर्स को जटिल लेआउट बनाने में मदद मिलती है जो विभिन्न स्क्रीन आकारों के अनुकूल होते हैं।
कंटेनर जोड़ना
हम दो मुख्य कंटेनरों का उपयोग करेंगे: एक डेटा प्रविष्टि के लिए और दूसरा एक सामान्य कंटेनर में लिपटे गणना परिणामों को प्रदर्शित करने के लिए।
सबसे पहले, अन्य सभी तत्वों को रखने के लिए कैनवास में फ्लेक्स कंटेनर जोड़ें।
उपस्थिति पैनल में, आप सेटिंग्स की एक श्रृंखला का पता लगा सकते हैं:
- एलिमेंट आईडी: व्यावसायिक प्रक्रियाओं में कंटेनर को संदर्भित करने के लिए एक विशिष्ट पहचानकर्ता।
- सामान्य समूह: दृश्यता और कर्सर शैली जैसी घटक की डिफ़ॉल्ट स्थिति को परिभाषित करने के लिए सेटिंग्स।
- फ्लेक्स चाइल्ड ग्रुप: यह निर्धारित करता है कि तत्व फ्लेक्स-पैरेंट घटक के भीतर कैसे व्यवहार करता है।
- लेआउट: कंटेनर के भीतर चाइल्ड आइटम को व्यवस्थित करने के लिए सेटिंग्स।
- आकार: तत्वों के आयाम निर्दिष्ट करने के लिए।
- रिक्ति : तत्व के अंदर और चारों ओर स्थान को समायोजित करता है।
- पृष्ठभूमि: पृष्ठभूमि रंगों और परतों के लिए विकल्प।
- कोने की त्रिज्या, सीमाएँ, छाया: तत्वों के किनारों, सीमाओं और छाया प्रभावों के लिए अनुकूलन।
- टूलटिप: होवर या फ़ोकस क्रियाओं के लिए टूलटिप जोड़ता है।
अपने मुख्य कंटेनर को अनुकूलित करें. उदाहरण के लिए, आइए दिशा को क्षैतिज पर सेट करें और गैप , पैडिंग , कॉर्नर त्रिज्या और बॉर्डर को समायोजित करें।
इसके बाद, मानों को इनपुट करने के लिए अपने मुख्य फॉर्म के अंदर एक और फ्लेक्स कंटेनर आर जोड़ें। मूल कंटेनर में उपलब्ध स्थान को भरने के लिए इसे पूरी चौड़ाई पर सेट करें।
परिणाम प्रदर्शित करने के लिए एक अलग ब्लॉक बनाने के लिए इस कंटेनर को डुप्लिकेट करें ( CTRL/⌘+D का उपयोग करके)। चौड़ाई गुण को 30% पर सेट करें।
यूआई तत्व जोड़ना
अपने एप्लिकेशन का निर्माण जारी रखने के लिए, आवश्यक यूआई तत्वों को जोड़ने का समय आ गया है।
फॉर्म जोड़ें
हमारी व्यावसायिक प्रक्रिया के लिए उपयोगकर्ता को फ़्लोट प्रकार के दो नंबर इनपुट करने की आवश्यकता होती है। इसे संभव बनाने के लिए, गणना प्रक्रिया शुरू करने के लिए दो फ़्लोट इनपुट और एक बटन जोड़ें।
बाईं ओर फ्लेक्स कंटेनर दिशा को वर्टिकल पर स्विच करें और नेस्टेड तत्वों के बीच थोड़ी सी जगह रखने के लिए एक गैप जोड़ें। इस फ्लेक्स कंटेनर के अंदर पहले मान के लिए एक इनपुट फ़्लोट जोड़ें, जिसे हम 'X' के रूप में लेबल करेंगे:
- इनपुट फ़्लोट तत्व को बाईं ओर के कंटेनर में खींचें और छोड़ें।
- उपस्थिति पैनल में, एक लेबल और प्लेसहोल्डर जोड़कर फ़ील्ड को वैयक्तिकृत करें।
- अपने एप्लिकेशन के डिज़ाइन के अनुरूप फ़ील्ड के स्वरूप को ठीक करें।
कैनवास पर जोड़े गए फ़ील्ड का चयन करें और CTRL/⌘+D का उपयोग करके इसे डुप्लिकेट करें। दूसरे मान, 'Y' को दर्शाने के लिए डुप्लिकेट किए गए फ़ील्ड के लेबल और प्लेसहोल्डर को संशोधित करें।
अब जोड़े गए फ़ील्ड के नीचे एक बटन तत्व को खींचें और छोड़ें। उपस्थिति पैनल में, बटन को पूरी चौड़ाई तक समायोजित करें। इसे फ्लेक्स चाइल्ड समूह में संरेखित संपत्ति को स्ट्रेच पर सेट करके प्राप्त किया जा सकता है।
बटन के लिए एक लेबल इनपुट करें, और वैकल्पिक रूप से, इसकी दृश्य अपील को बढ़ाने के लिए एक आइकन जोड़ें।
इन तत्वों को जोड़ने के बाद, स्पष्टता और पहचान में आसानी के लिए उनका नाम बदलना एक अच्छा अभ्यास है। इससे आपकी व्यावसायिक प्रक्रियाओं में उनका उल्लेख करना आसान हो जाता है, समझ में वृद्धि होती है और विकास प्रक्रिया में तेजी आती है।
परिणाम ब्लॉक जोड़ें
मूल कंटेनर के दाईं ओर, हम अपनी व्यावसायिक प्रक्रिया निष्पादित करने के बाद परिणाम प्रदर्शित करने के लिए एक स्थान कॉन्फ़िगर करेंगे। सबसे पहले, इस कंटेनर की दिशा संपत्ति को वर्टिकल पर सेट करें और तत्वों को साफ-सुथरा रखने के लिए एक छोटा सा गैप जोड़ें। इसकी चौड़ाई को 30% में बदलें।
इस दाएं कंटेनर के भीतर, एक नया क्षैतिज फ्लेक्स कंटेनर डालें और इसके अंदर ऑपरेशन का प्रतिनिधित्व करने वाला एक आइकन तत्व, एक समान प्रतीक वाला एक टेक्स्ट ब्लॉक और टेक्स्ट ब्लॉक जोड़ें जहां ऑपरेशन का परिणाम प्रदर्शित किया जाएगा। इस कंटेनर को चार बार डुप्लिकेट करें, प्रत्येक को हमारे परिभाषित गणितीय कार्यों के लिए अपडेट करें।
उपस्थिति पैनल के साथ प्रत्येक तत्व को अपनी इच्छानुसार अनुकूलित करें।
संकेत ब्लॉक जोड़ें
इंटरफ़ेस की उपयोगिता बढ़ाने के लिए, हम एक प्लेसहोल्डर बनाते हैं जो परिणाम मिलने तक प्रदर्शित होगा। इसके लिए, एक अतिरिक्त फ्लेक्स कंटेनर जोड़ें, जो सही कंटेनर की चौड़ाई (30%) को प्रतिबिंबित करता है, और एक वर्णनात्मक संकेत के साथ अंदर एक टेक्स्ट ब्लॉक रखें।
परिणामों वाले कंटेनर की एक प्रमुख विशेषता इसकी प्रारंभिक दृश्यता स्थिति है। डिफ़ॉल्ट रूप से, दृश्यमान स्विच को बंद कर दें, शुरुआत में इसे अदृश्य बना दें।
तत्व छिपाएँ
व्यवसाय प्रक्रिया निष्पादित होने और परिणाम प्राप्त होने के बाद ही हम इस कंटेनर को दृश्यमान बनाएंगे और डेटा अपडेट करेंगे। व्यावसायिक प्रक्रियाओं के निर्माण और प्रदर्शित करने के लिए परिणाम लिखने के दौरान आसान पहचान सुनिश्चित करने के लिए टेक्स्ट ब्लॉक नाम निर्दिष्ट करना महत्वपूर्ण है।
🎉अच्छा काम! हमने अपने एप्लिकेशन के लिए एकदम सही यूआई बनाया है और अपने तत्वों में अन्तरक्रियाशीलता जोड़ने के लिए तैयार हैं।