Mobile Angular UI - ส่วนประกอบ

ในบทนี้เราจะมาทำความเข้าใจส่วนประกอบที่สำคัญใน UI เชิงมุมของอุปกรณ์เคลื่อนที่ มีดังนี้ -

Navbars
Sidebars
Modals
Overlays

Navbars

Navbars ใช้ประโยชน์จากส่วนบนและล่างของหน้าจออุปกรณ์ เราสามารถใช้แถบนำทางด้านบนเพื่อแสดงรายการเมนูหรือส่วนหัว สามารถใช้แถบนำทางด้านล่างเพื่อแสดงส่วนท้าย

การแสดง navbar อย่างง่ายบนหน้าจอมีดังนี้ -

Navbar สามารถแสดงได้สองวิธี: วิธีแก้ไขและโอเวอร์โฟลว์

คลาส CSS ที่สำคัญ

ในมือถือเชิงมุม UI ที่จะแสดงแถบนำทางคุณจะต้องทำให้การใช้งานของคลาส CSS - navbar, .navbar

ชั้นเรียนสำหรับวิธีการล้นบน / ล่าง

สำหรับด้านบน navbar คลาส CSS - การ.navbar-แน่นอนด้านบน

สำหรับแถบนำทางด้านล่างคลาส CSS - การ.navbar-แน่นอนด้านล่าง

ชั้นเรียนสำหรับแนวทางคงที่บน / ล่าง

สำหรับด้านบน navbar คลาส CSS - การ.navbar คงที่ด้านบน

สำหรับแถบนำทางด้านล่างคลาส CSS - การ.navbar ด้านล่างคงที่

ให้เราทำงานบน Overflow Navbar บน UI

ต่อไปนี้เป็นรหัส 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>

นี่คือลักษณะการแสดงผล -

แถบด้านข้าง

แถบด้านข้างครอบครองด้านซ้ายและขวาของหน้าจอ ซึ่งจะถูกซ่อนและเปิดใช้งานเสมอเมื่อมีการคลิกรายการที่เชื่อมต่อทางด้านซ้ายหรือด้านขวา เป็นวิธีที่ดีที่สุดในการใช้พื้นที่บนหน้าจอ

จนถึงตอนนี้เราได้เห็นการทำงานของแถบนำทาง ตอนนี้ให้เราใช้ประโยชน์จากรายการ navbar ทางด้านซ้ายและด้านขวาเพื่อเปิดแถบด้านข้าง

คุณสามารถวางแถบด้านข้างทางด้านซ้ายหรือด้านขวา

คลาส CSS ที่สำคัญ

เรียน CSS สำหรับแถบด้านข้างด้านซ้าย - แถบด้านข้างแถบด้านข้างซ้าย

เรียน CSS สำหรับแถบด้านข้างด้านขวา - แถบด้านข้างแถบด้านข้างขวา

คอนเทนเนอร์ div สำหรับแถบด้านข้างมีดังนี้ -

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

การโต้ตอบกับแถบด้านข้าง

ในการเปิดและปิดแถบด้านข้างที่เพิ่มทางด้านซ้ายและด้านขวาคุณจะต้องเพิ่มสิ่งต่อไปนี้ลงในแท็ก html ที่จะเปิดแถบด้านข้าง

ตัวอย่างเช่นหากต้องการเปิดแถบด้านข้างทางซ้ายเมื่อคลิกที่ลิงก์คุณสามารถเพิ่มสิ่งต่อไปนี้ -

แถบด้านข้างทำให้การใช้ sharedstate uiSidebarLeftและuiSidebarRightเพื่อสลับรายการแถบด้านข้าง

เราจะใช้ประโยชน์จากแถบนำทางด้านบนที่เราเพิ่มไว้ก่อนหน้านี้ เพิ่ม ui-toggle =” uiSidebarLeft” และ ui-toggle = "uiSidebarRight" และยังมี class sidebar-toggle และ sidebar-right-toggle

<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 สำหรับแถบด้านข้างซ้ายและแถบด้านข้างขวา

แถบด้านข้างซ้าย

<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 เพื่อรับเมนูด้านขวาตามภาพด้านล่าง -

Modals และ Overlays

Modals และ Overlays จะแสดงหน้าต่างประเภทป๊อปอัปบนหน้าจอของคุณ การวางซ้อนจะแตกต่างจากโมดอลเฉพาะในการแสดงคอนเทนเนอร์เท่านั้น

คุณต้องใช้ประโยชน์จากไฟล์ ngIf/uiIf หรือ ngHide/uiHide พร้อมกับ uiState เพื่อเปิด / ปิดโอเวอร์เลย์หรือโมดอล

css สำหรับโมดอลจะเป็น .modalและสำหรับการซ้อนทับก็จะเป็น .modal-overlay.

หากต้องการแสดงโมดอลและการวางซ้อนให้เพิ่มคอนเทนเนอร์ div ต่อไปนี้ภายใน index.html ของคุณ

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

ให้เรากำหนดโมดอลให้กับส่วนท้ายของแถบนำทางที่เราได้ทำไปก่อนหน้านี้

ที่นี่เกี่ยวกับเราจะทำหน้าที่เป็นโมดอลและ 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 ต่อไปนี้ -

<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>

การแสดงผลสำหรับโมดอลและโอเวอร์เลย์มีดังนี้ -

เมื่อคลิกเกี่ยวกับเรามันจะแสดงโมดอลตามที่แสดงด้านล่าง -