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>

侧边栏有助于有效利用空间，尤其是在移动设备上，这使得用户界面非常具有交互性和整洁性。通过侧边栏，窗口从左侧和右侧打开。

导航栏

下一部分是导航栏。以下是要显示的导航栏的 div 容器 −

<div class="navbar navbar-app navbar-absolute-top"><!-- 顶部导航栏 --></div>
<div class="navbar navbar-app navbar-absolute-bottom"><!-- 底部导航栏 --></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>