Mobile Angular UI - Bileşenler

Bu bölümde, mobil açısal kullanıcı arayüzündeki önemli bileşenleri anlayacağız. Bunlar aşağıdaki gibidir -

Navbars
Sidebars
Modals
Overlays

Navbars

Gezinme çubukları, cihaz ekranının üst ve alt kısmını kullanır. Menü öğelerini veya başlık bölümünü görüntülemek için üst gezinme çubuğunu kullanabiliriz. Alt gezinme çubuğu, altbilgi bölümünü görüntülemek için kullanılabilir.

Gezinme çubuğunun ekrandaki basit görüntüsü aşağıdaki gibidir -

Navbar iki şekilde gösterilebilir: sabit ve taşma yaklaşımı.

Önemli CSS sınıfları

Mobil Açısal Kullanıcı Arayüzünde navbar'ı göstermek için css sınıflarını ( navbar, .navbar-app) kullanmanız gerekir .

Üst / Alt Taşma yaklaşımı için Sınıflar

Üst navbar için css sınıfı - .navbar-absolute-top .

Alt gezinme çubuğu için css sınıfı - .navbar-absolute-bottom .

Üst / Alt sabit yaklaşım için Sınıflar

Üst navbar için css sınıfı - .navbar-fixed-top .

Alt gezinme çubuğu için css sınıfı - .navbar-fixed-bottom .

Kullanıcı arayüzündeki Taşma Navbar'ı üzerinde çalışalım.

Aşağıdakiler aynı için HTML kodu -

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>

Ekran böyle görünüyor -

Kenar çubukları

Kenar çubukları ekranın sol ve sağ tarafını kaplar. Sol veya sağ tarafa bağlı öğe tıklandığında her zaman gizlenir ve etkinleştirilirler. Ekrandaki alanı kullanmanın en iyi yolu budur.

Şimdiye kadar navbarların çalışmasını gördük. Şimdi kenar çubuklarını açmak için sol ve sağ taraftaki gezinme çubuğunu kullanalım.

Kenar çubuklarını sol veya sağ tarafa yerleştirebilirsiniz.

Önemli CSS sınıfları

Sol kenar çubuğu için css sınıfları - sol kenar çubuğu .

Sağ taraftaki kenar çubuğunda için css sınıfları - kenar çubuğu kenar çubuğu sağ .

Kenar çubuğu için div kapsayıcısı aşağıdaki gibidir -

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

Kenar Çubukları ile Etkileşim

Sol ve sağ tarafa eklenen kenar çubuklarını açıp kapatmak için kenar çubuklarını açacak olan html etiketine aşağıdakileri eklemeniz gerekir.

Örneğin, bir bağlantıya tıklandığında sol kenar çubuğunu açmak için aşağıdakileri ekleyebilirsiniz -

Kenar çubuğu, kenar çubuğu öğelerini değiştirmek için paylaşılan durum uiSidebarLeft ve uiSidebarRight'ı kullanır.

Daha önce eklediğimiz üst gezinme çubuğunu kullanacağız. Ui-toggle = ”uiSidebarLeft” ve ui-toggle = "uiSidebarRight" ve ayrıca sınıf sidebar-toggle ve sidebar-right-toggle ekleyin.

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

Şimdi sol kenar çubuğu ve sağ kenar çubuğu için bir div kapsayıcı ekleyelim.

Sol Kenar Çubuğu

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

Kullanabilirsiniz ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarRight'kenar çubuğunun içinde herhangi bir yere tıklandığında kenar çubuğunu kapatmak için kenar çubuğu şablonunuzda. Kenar çubuğu şablonunun dışındaki herhangi bir yere tıklandığında kenar çubuğu varsayılan olarak kapatılacaktır.

Sol taraftaki çubukta, kullanıcı bağlantılara tıkladığında, eklediğimiz gibi kenar çubuğu kapatılacaktır. ui-turn-off='uiSidebarLeft' sol kenar çubuğu şablonuna.

Sağ Kenar Çubuğu

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

Kenar çubuğunun tarayıcıdaki görüntüsü aşağıdaki gibidir -

Aşağıda gösterildiği gibi sol kenar çubuğu menüsüne gitmek için Öğreticiler'e tıklayın -

Aşağıda gösterildiği gibi sağ taraftaki menüye ulaşmak için E-Kitaplara tıklayın -

Modaller ve Kaplamalar

Modals ve Overlays, ekranınızda açılır pencere türü bir pencere gösterecektir. Bindirmeler, yalnızca kabın kendisi için görüntülenme şekli açısından modaldan farklılık gösterir.

Kullanmanız gerekiyor ngIf/uiIf veya ngHide/uiHide uiState ile birlikte bindirmeyi veya modal'ı etkinleştirmek / devre dışı bırakmak için.

Modal için css, .modalve üst üste bindirme için .modal-overlay.

Modal ve kaplamayı göstermek için aşağıdaki div kapsayıcısını index.html dosyanıza ekleyin.

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

Daha önce yaptığımız navbar altbilgisine bir modal atayalım.

Burada HAKKIMIZDA bir model olarak hareket edecek ve BİZE ULAŞIN bir kaplama görevi görecek.

HAKKIMIZDA ve BİZİMLE İLETİŞİM bağlantılarına aşağıdaki değişiklikleri ekleyin -

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

Bu bağlantıya tıklarsak, modal ve overlay açılacaktır.

Modal ve kaplama içeriği eklendi inside src/home/home.html dosya.

Modal ve overlay için ana içerik aşağıdaki div kapsayıcısının içine sarılmalıdır -

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

Modal ve bindirme görünümüne içerik ekleyelim. Bağlantılarda kullandığımız isim, yani,ui-turn-on="aboutus_modal" and ui-turn-on="contactus_overlay"aynısı içeride de kullanılır aboutus modal içerik ve contactus yer paylaşımlı içerik.

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

Modal ve bindirme ekranı aşağıdaki gibidir -

HAKKIMIZDA seçeneğine tıklandığında, aşağıda gösterildiği gibi modal görüntülenecektir -