Mobile Angular UI - 元件

上一頁
下一頁

在本章中，我們將瞭解 Mobile Angular UI 中的重要元件。它們如下所示：

  • 導航欄
  • 側邊欄
  • 模態框
  • 覆蓋層

導航欄

導航欄利用裝置螢幕的頂部和底部區域。我們可以使用頂部導航欄顯示選單項或標題部分。底部導航欄可用於顯示頁尾部分。

在螢幕上簡單顯示導航欄如下所示：

Navbars

導航欄可以透過兩種方式顯示：固定和溢位方法。

重要的 CSS 類

在 Mobile Angular UI 中，要顯示導航欄，您需要使用 CSS 類 - navbar, .navbar-app。

頂部/底部溢位方法的類

對於頂部導航欄，CSS 類為 - .navbar-absolute-top。

對於底部導航欄，CSS 類為 - .navbar-absolute-bottom。

頂部/底部固定方法的類

對於頂部導航欄，CSS 類為 - .navbar-fixed-top。

對於底部導航欄，CSS 類為 - .navbar-fixed-bottom。

讓我們在 UI 上處理溢位導航欄。

以下是相同的 HTML 程式碼：

頂部導航欄

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

底部導航欄

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

顯示效果如下：

Navbars Bottom

側邊欄

側邊欄佔據螢幕的左側和右側。它們始終隱藏，並在單擊連線到左側或右側的專案時啟用。這是利用螢幕空間的最佳方式。

到目前為止，我們已經瞭解了導航欄的工作原理。現在讓我們利用左側和右側的導航欄專案來開啟側邊欄。

您可以在左側或右側放置側邊欄。

重要的 CSS 類

左側側邊欄的 CSS 類 - sidebar sidebar-left。

右側側邊欄的 CSS 類 - sidebar sidebar-right。

側邊欄的 div 容器如下所示：

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

與側邊欄互動

要開啟和關閉新增到左側和右側的側邊欄，您需要將以下內容新增到將開啟側邊欄的 html 標籤中。

例如，要在單擊連結時開啟左側側邊欄，您可以新增以下內容：

側邊欄使用共享狀態 uiSidebarLeft 和 uiSidebarRight 來切換側邊欄專案。

我們將使用之前新增的頂部導航欄。新增 ui-toggle=”uiSidebarLeft” 和 ui-toggle="uiSidebarRight" 以及類 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' 或 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>

側邊欄在瀏覽器中的顯示如下所示：

單擊教程以獲取左側側邊欄選單，如下所示：

Left Sidebar

單擊電子書以獲取右側選單，如下所示：

Right Sidebar

模態框和覆蓋層

模態框和覆蓋層將在您的螢幕上顯示一個彈出式視窗。覆蓋層與模態框的不同之處僅在於其容器的顯示方式。

您需要將 ngIf/uiIf 或 ngHide/uiHide 與 uiState 結合使用以啟用/關閉覆蓋層或模態框。

模態框的 CSS 為 .modal，覆蓋層的 CSS 為 .modal-overlay。

要顯示模態框和覆蓋層，請在您的 index.html 中新增以下 div 容器。

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

讓我們將模態框分配給之前完成的導航欄頁尾。

navbar footer

此處“關於我們”將充當模態框，“聯絡我們”將充當覆蓋層。

對“關於我們”和“聯絡我們”的連結進行以下更改：

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

如果我們單擊此連結，模態框和覆蓋層將開啟。

模態框和覆蓋層的內容新增到 src/home/home.html 檔案中。

模態框和覆蓋層的主要內容必須包裝在以下 div 容器內：

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

讓我們向模態框和覆蓋層檢視新增內容。我們在連結中使用的名稱，即 ui-turn-on="aboutus_modal" 和 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>

模態框和覆蓋層的顯示如下所示：

單擊“關於我們”將顯示如下所示的模態框：

Onclick

單擊“聯絡我們”將顯示如下所示的覆蓋層：

Contact

單擊關閉按鈕以關閉模態框視窗。

列印頁面
上一頁
下一頁
廣告

© . All rights reserved.