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>

打印页面