मोबाइल कोणीय यूआई - घटक

इस अध्याय में, हम मोबाइल कोणीय यूआई में महत्वपूर्ण घटकों को समझने जा रहे हैं। वे इस प्रकार हैं -

• Navbars
• Sidebars
• Modals
• Overlays

navbars

नवबर्स डिवाइस स्क्रीन के ऊपर और नीचे के हिस्से का उपयोग करते हैं। हम मेनू आइटम या हेडर अनुभाग को प्रदर्शित करने के लिए शीर्ष नौबार का उपयोग कर सकते हैं। नीचे दिए गए नेवबार का उपयोग पाद लेख अनुभाग को प्रदर्शित करने के लिए किया जा सकता है।

स्क्रीन पर नावबार का एक सरल प्रदर्शन इस प्रकार है -

नवबार को दो तरीकों से दिखाया जा सकता है: फिक्स्ड और ओवरफ्लो दृष्टिकोण।

महत्वपूर्ण सीएसएस कक्षाएं

मोबाइल एंगुलर UI में नेवबार दिखाने के लिए आपको सीएसएस क्लासेस - नेवबार, .navbar-app का उपयोग करना होगा ।

शीर्ष / निचला ओवरफ़्लो दृष्टिकोण के लिए कक्षाएं

शीर्ष नौसैनिक के लिए सीएसएस वर्ग - .navbar- निरपेक्ष-शीर्ष ।

तल नौसर के लिए css वर्ग - .navbar- निरपेक्ष-तल ।

टॉप / बॉटम फिक्स्ड एप्रोच के लिए कक्षाएं

शीर्ष नौसिखिया के लिए सीएसएस वर्ग - .navbar-fixed-top ।

नीचे नौसिखिए के लिए सीएसएस वर्ग - .navbar- फिक्स्ड-बॉटम ।

आइए हम यूआई पर ओवरफ्लो नवबार पर काम करते हैं।

निम्नलिखित के लिए HTML कोड निम्नलिखित है -

Navbar-Top

<div class="navbar navbar-app navbar-absolute-top">
   <div class="btn-group pull-left">
      <div class="btn">
         <i class="fa fa-th-large "></i> Library
      </div>
   </div>
   <div class="navbar-brand navbar-brand-center" ui-yield-to="title">
      TutorialsPoint
   </div>
   <div class="btn-group pull-right" ui-yield-to="navbarAction">
      <div class="btn">
         <i class="fal fa-search"></i> eBooks
      </div>
   </div>
</div>

Navbar-Bottom

<div class="navbar navbar-app navbar-absolute-bottom">
   <div class="btn-group justified">
      <a href="https://www.tutorialspoint.com/about/index.htm" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
      <a href="https://www.tutorialspoint.com/about/contact_us.htm" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
   </div>
</div>

यह कैसा प्रदर्शन है -

साइडबार

साइडबार स्क्रीन के बाईं और दाईं ओर स्थित है। वे हमेशा छिपे और सक्रिय होते हैं जब बाईं ओर या दाईं ओर से जुड़े आइटम पर क्लिक किया जाता है। यह स्क्रीन पर अंतरिक्ष का उपयोग करने का सबसे अच्छा तरीका है।

अब तक हमने नेबर्स के काम को देखा है। आइए अब साइडबार खोलने के लिए बाईं ओर और दाईं ओर नावबार आइटम का उपयोग करें।

आप साइडबार को बाईं ओर या दाईं ओर रख सकते हैं।

महत्वपूर्ण सीएसएस कक्षाएं

लेफ्ट साइड साइडबार के लिए सीएसएस क्लासेस - साइडबार साइडबार-लेफ्ट ।

दाएं साइड साइडबार के लिए सीएसएस कक्षाएं - साइडबार साइडबार-राइट ।

साइडबार के लिए div कंटेनर निम्नानुसार है -

<!-- Sidebars -->
<div class="sidebar sidebar-left"><!-- ... --></div>
<div class="sidebar sidebar-right"><!-- ... --></div>

साइडबार के साथ सहभागिता

बाईं ओर और दाईं ओर जोड़े गए साइडबार को खोलने और बंद करने के लिए आपको निम्नलिखित को html टैग में जोड़ना होगा जो साइडबार को खोल देगा।

उदाहरण के लिए, एक लिंक पर क्लिक करने के लिए बाएं साइडबार खोलने के लिए आप निम्नलिखित जोड़ सकते हैं -

साइडबार साइडबार आइटम को टॉगल करने के लिए शेयर्डस्टेट uiSidebarLeft और uiSidebarRight का उपयोग करता है।

हम पहले जोड़े गए शीर्ष नावबार का उपयोग करने जा रहे हैं। Ui-toggle = "uiSidebarLeft" और ui-toggle = "uiSidebarRight" जोड़ें और वर्ग साइडबार-टॉगल और साइडबार-राइट-टॉगल भी जोड़ें।

<div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle"><i class="fa fa-th-large "></i> Library</div>

<div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle"><i class="fal fa-search"></i> Search</div>

आइए अब हम लेफ्ट साइडबार और राइट साइडबार के लिए एक डिव कंटेनर जोड़ें।

बाईं साइडबार

<div class="sidebar sidebar-left">
   <div class="scrollable">
      <h1 class="scrollable-header app-name">Tutorials</h1>
      <div class="scrollable-content">
         <div class="list-group" ui-turn-off='uiSidebarLeft'>
            <a class="list-group-item" href="/">Home Page </a>
            <a class="list-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
            <a class="list-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
            <a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
            <a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
            <a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
            <a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
         </div>
      </div>
   </div>
</div>

आप का उपयोग कर सकते हैं ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarRight'साइडबार के अंदर कहीं भी क्लिक करने पर साइडबार को बंद करने के लिए अपने साइडबार टेम्पलेट में। साइडबार टेम्पलेट के बाहर कहीं भी क्लिक करने पर साइडबार डिफ़ॉल्ट रूप से बंद हो जाएगा।

बाईं ओर बार में जब उपयोगकर्ता लिंक पर क्लिक करता है, तो साइडबार बंद हो जाएगा जैसा कि हमने जोड़ा है ui-turn-off='uiSidebarLeft' बाईं साइडबार टेम्पलेट के लिए।

राइट साइडबार

<div class="sidebar sidebar-right">
   <div class="scrollable">
      <h1 class="scrollable-header app-name">eBooks</h1>
      <div class="scrollable-content">
         <div class="list-group" ui-toggle="uiSidebarRight">
            <a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
            <a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
         </div>
      </div>
   </div>
</div>

ब्राउज़र में साइडबार का प्रदर्शन इस प्रकार है -

नीचे दिखाए अनुसार साइडबार मेनू पाने के लिए ट्यूटोरियल पर क्लिक करें -

नीचे दिखाए गए अनुसार राइट साइड मेनू पाने के लिए Ebooks पर क्लिक करें -

मोडल और ओवरले

मोडल और ओवरले आपकी स्क्रीन पर एक पॉप-अप टाइप विंडो दिखाएंगे। ओवरले केवल मॉडल से भिन्न होते हैं कि कंटेनर को इसके लिए कैसे प्रदर्शित किया जाता है।

आपको इसका उपयोग करने की आवश्यकता है ngIf/uiIf या ngHide/uiHide ओवरले या मोडल को सक्रिय / खारिज करने के लिए uiState के साथ।

मोडल के लिए सीएसएस होगा .modal, और ओवरले के लिए, यह होगा .modal-overlay।

मोडल और ओवरले दिखाने के लिए, अपने index.html के अंदर निम्नलिखित div कंटेनर जोड़ें।

<div ui-yield-to="modals"></div>

आइए हम पहले किए गए नाविक पाद लेख को एक मोडल प्रदान करें।

यहां ABOUT US एक मोडल के रूप में कार्य करेगा और CONTACT US ओवरले के रूप में कार्य करेगा।

US और CONTACT US के लिंक में निम्नलिखित परिवर्तन जोड़ें -

<div class="navbar navbar-app navbar-absolute-bottom">
   <div class="btn-group justified">
      <a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
      <a ui-turn-on="contactus_overlayl" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
   </div>
</div>

यदि हम इस लिंक पर क्लिक करते हैं, तो मोडल और ओवरले खुल जाएगा।

मोडल और ओवरले के लिए सामग्री जोड़ी गई है inside src/home/home.html फ़ाइल।

मोडल और ओवरले के लिए मुख्य सामग्री को निम्नलिखित डिव कंटेनर के अंदर लपेटना होगा -

<div ui-content-for="modals">
   <div class="modal"><!-- ... --></div>
</div>

आइए हम मोडल और ओवरले दृश्य में सामग्री जोड़ते हैं। हमने लिंक पर जो नाम इस्तेमाल किया है,ui-turn-on="aboutus_modal" and ui-turn-on="contactus_overlay", उसी का उपयोग अंदर के लिए किया जाता है aboutus मोडल सामग्री और contactus ओवरले सामग्री।

<div ui-content-for="modals">
   <div class="modal" ui-if="aboutus_modal" ui-shared-state="aboutus_modal">
      <div class="modal-backdrop in"></div>
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <button class="close"
                  ui-turn-off="aboutus_modal">×</button>
               <h4 class="modal-title">Modal</h4>
            </div>
            <div class="modal-body">
               <p>Testing Modal</p>
            </div>
            <div class="modal-footer">
               <button ui-turn-off="aboutus_modal" class="btn btn-default">Close</button>
               <button ui-turn-off="aboutus_modal" class="btn btn-primary">Save</button>
            </div>
         </div>
      </div>
   </div>
   <div class="modal modal-overlay" ui-if="contactus_overlay" ui-shared-state="contactus_overlay">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <button class="close"
                  ui-turn-off="contactus_overlay">×</button>
               <h4 class="modal-title">Overlay</h4>
            </div>
            <div class="modal-body">
               <p>Testing Overlay</p>
            </div>
            <div class="modal-footer">
               <button ui-turn-off="contactus_overlay" class="btn btn-default">Close</button>
               <button ui-turn-off="contactus_overlay" class="btn btn-primary">Save</button>
            </div>
         </div>
      </div>
   </div>
</div>

मोडल और ओवरले के लिए प्रदर्शन इस प्रकार है -

यूएस के बारे में क्लिक करें यह नीचे दिखाए गए अनुसार प्रदर्शित करेगा -

हमसे संपर्क करें, यह नीचे दिखाए गए अनुसार ओवरले प्रदर्शित करेगा -

मोडल विंडो को बंद करने के लिए क्लोज बटन पर क्लिक करें।