モバイルAngularUI-レイアウト
この章では、モバイルAngularUIで使用できる基本的なレイアウト表示について説明します。
基本レイアウトの構成は以下のとおりです。
<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コンテナで始まり、1つは左側用、次は右側用です。
<!-- Sidebars -->
<div class="sidebar sidebar-left"><!-- ... --></div>
<div class="sidebar sidebar-right"><!-- ... --></div>サイドバーは、特にモバイルでスペースを効率的に利用するのに役立ち、UIを非常にインタラクティブできれいにします。サイドバーで、窓は左側と右側から開きます。
Navbars
次のセクションはnavbarsです。以下は、表示されるnavbarの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でのユーザー操作に基づいて、実際のコンテンツに置き換えられるディレクティブ。ここでは、AngularJSNgRouteを使用してビューを置き換えています。
モーダルとオーバーレイ
最後のセクションは、モーダルとオーバーレイのセクションです。モーダルとオーバーレイを表示するdivコンテナは次のとおりです-
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>