Мобильный пользовательский интерфейс Angular - макеты

В этой главе мы разберемся с основным отображением макета, доступным в 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>

Экран вашего мобильного или настольного компьютера разделен на разделы.

Боковая панель

Раздел body начинается с контейнеров div боковой панели, один для левой стороны, а следующий для правой стороны -

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

Боковая панель помогает эффективно использовать пространство, особенно на мобильных устройствах, что делает интерфейс очень интерактивным и аккуратным. На боковой панели окна открываются с левой и правой стороны.

Навбары

Следующий раздел - это панели навигации. Ниже приведены контейнеры 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>директива, которая будет заменена фактическим содержимым в зависимости от взаимодействия пользователя с пользовательским интерфейсом. AngularJS NgRoute используется здесь для замены представлений.

Модальные окна и оверлеи

Последний раздел - это раздел модальных окон и оверлеев. Контейнер div для отображения модальных окон и наложений выглядит следующим образом:

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