Mobile Angular UI - Komponen

Dalam bab ini, kita akan memahami komponen penting dalam UI sudut seluler. Mereka adalah sebagai berikut -

Navbars
Sidebars
Modals
Overlays

Navbar

Navbar memanfaatkan bagian atas dan bawah layar perangkat. Kita dapat menggunakan bilah navigasi atas untuk menampilkan item menu atau bagian tajuk. Bilah navigasi bawah dapat digunakan untuk menampilkan bagian footer.

Tampilan sederhana navbar di layar adalah sebagai berikut -

Navbar dapat ditampilkan dalam dua cara: pendekatan tetap dan luapan.

Kelas CSS penting

Dalam Mobile Angular UI untuk menampilkan navbar, Anda harus menggunakan kelas css - navbar, .navbar-app .

Kelas untuk pendekatan Overflow Atas / Bawah

Untuk bilah navigasi atas, kelas css - .navbar-absolute-top .

Untuk bilah navigasi bawah, kelas css - .navbar-absolute-bottom .

Kelas untuk pendekatan tetap Atas / Bawah

Untuk bilah navigasi atas, kelas css - .navbar-fixed-top .

Untuk bilah navigasi bawah, kelas css - .navbar-fixed-bottom .

Mari kita kerjakan Overflow Navbar di UI.

Berikut ini adalah kode HTML yang sama -

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>

Seperti inilah tampilannya -

Sidebars

Bilah sisi menempati sisi kiri dan kanan layar. Mereka selalu tersembunyi dan diaktifkan ketika item yang terhubung ke sisi kiri atau kanan diklik. Ini adalah cara terbaik untuk memanfaatkan ruang di layar.

Sejauh ini kita telah melihat cara kerja navbar. Sekarang mari kita gunakan item navbar di sisi kiri dan kanan untuk membuka sidebar.

Anda dapat menempatkan sidebar di sisi kiri atau kanan.

Kelas CSS penting

Kelas css untuk sidebar sisi kiri - sidebar sidebar-left .

Kelas css untuk sidebar kanan - sidebar sidebar-right .

Wadah div untuk sidebar adalah sebagai berikut -

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

Interaksi dengan Sidebars

Untuk membuka dan menutup sidebar yang ditambahkan di sisi kiri dan kanan Anda perlu menambahkan yang berikut ini ke tag html yang akan membuka sidebar.

Misalnya, untuk membuka sidebar kiri saat mengklik link, Anda dapat menambahkan berikut ini -

Sidebar menggunakan sharedstate uiSidebarLeft dan uiSidebarRight untuk mengganti item sidebar.

Kami akan menggunakan bilah navigasi atas yang kami tambahkan sebelumnya. Tambahkan ui-toggle = ”uiSidebarLeft” dan ui-toggle = "uiSidebarRight" dan juga class sidebar-toggle dan 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>

Sekarang mari kita tambahkan wadah div untuk sidebar kiri dan sidebar kanan.

Sidebar Kiri

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

Anda bisa memanfaatkan ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarRight'di template sidebar Anda untuk menutup sidebar saat diklik di mana pun di dalam sidebar. Sidebar akan ditutup secara default saat diklik di mana saja di luar template sidebar.

Di bilah sisi kiri ketika pengguna mengklik tautan, bilah sisi akan ditutup seperti yang telah kami tambahkan ui-turn-off='uiSidebarLeft' ke template sidebar kiri.

Sidebar Kanan

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

Tampilan sidebar di browser adalah sebagai berikut -

Klik Tutorial untuk mendapatkan menu sidebar kiri seperti yang ditunjukkan di bawah ini -

Klik pada Ebooks untuk mendapatkan menu sisi kanan seperti yang ditunjukkan di bawah ini -

Modal dan Overlay

Modals dan Overlay akan menampilkan jendela jenis pop-up di layar Anda. Overlay berbeda dari modal hanya dalam cara penampung ditampilkan untuknya.

Anda perlu memanfaatkan ngIf/uiIf atau ngHide/uiHide bersama dengan uiState untuk mengaktifkan / menutup overlay atau modal.

Css untuk modal akan menjadi .modal, dan untuk overlay, itu akan menjadi .modal-overlay.

Untuk menampilkan modal dan overlay, tambahkan container div berikut di dalam index.html Anda.

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

Mari kita tetapkan modal ke footer navbar yang telah kita lakukan sebelumnya.

Di sini TENTANG KAMI akan bertindak sebagai modal dan HUBUNGI KAMI akan bertindak sebagai hamparan.

Tambahkan perubahan berikut ke tautan TENTANG KAMI dan HUBUNGI KAMI -

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

Jika kita mengklik link ini, modal dan overlay akan terbuka.

Konten untuk modal dan overlay ditambahkan inside src/home/home.html mengajukan.

Konten utama untuk modal dan overlay harus dibungkus di dalam wadah div berikut -

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

Mari kita tambahkan konten ke modal dan tampilan overlay. Nama yang kami gunakan di tautan yaitu,ui-turn-on="aboutus_modal" and ui-turn-on="contactus_overlay", hal yang sama digunakan di dalam untuk aboutus konten modal dan contactus konten overlay.

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

Tampilan untuk modal dan overlay adalah sebagai berikut -

Klik TENTANG KAMI itu akan menampilkan modal seperti yang ditunjukkan di bawah ini -