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 มีการโต้ตอบและเรียบร้อย โดยแถบด้านข้างหน้าต่างจะเปิดจากด้านซ้ายและด้านขวา
Navbars
ส่วนถัดไปคือแถบนำทาง ต่อไปนี้เป็นคอนเทนเนอร์ div สำหรับ navbars ที่จะแสดง -
<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 ใช้ที่นี่เพื่อแทนที่มุมมอง
Modals และ Overlays
ส่วนสุดท้ายคือโมดอลและส่วนการวางซ้อน คอนเทนเนอร์ div ที่จะแสดงโมดอลและโอเวอร์เลย์มีดังนี้ -
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>