Мобильный пользовательский интерфейс 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>