Mobile Angular UI - 佈局

本章我們將瞭解 Mobile Angular UI 中可用的基本佈局顯示。

基本佈局的結構如下：

<body ng-app="myFirstApp" ng-controller="MainController">
      
   <!-- Sidebars -->
   <div class="sidebar sidebar-left"><!-- ... --></div>
   <div class="sidebar sidebar-right"><!-- ... --></div>
   
   <div class="app">
      <div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div>
      <div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div>
      
      <!-- App body -->
      <div class='app-body'>
         <div class='app-content'>
            <ng-view></ng-view>
         </div>
      </div>
   </div><!-- ~ .app -->
      
   <!-- Modals and Overlays -->
   <div ui-yield-to="modals"></div>

</body>

您的手機或桌面螢幕被分成幾個部分。

側邊欄

主體部分以側邊欄 div 容器開頭，一個用於左側，另一個用於右側：

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

側邊欄有助於有效利用空間，尤其是在移動裝置上，這使得 UI 非常互動且簡潔。透過側邊欄，視窗從左側和右側開啟。

導航欄

下一部分是導航欄。以下是顯示導航欄的 div 容器：

<div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div>
<div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div>

它們顯示在頂部和底部。

應用主體部分

此部分是主要區域，您的內容在此顯示，供使用者互動或閱讀。

<div class='app-body'>
   <div class='app-content'>
      <ng-view></ng-view>
   </div>
</div>

它使用<ng-view></ng-view>指令，該指令將根據使用者在 UI 上的互動替換為實際內容。此處使用 AngularJS NgRoute 來替換檢視。

模態框和覆蓋層

最後一部分是模態框和覆蓋層部分。顯示模態框和覆蓋層的 div 容器如下：

<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>

列印頁面