UI móvel angular - layouts

Neste capítulo, entenderemos a exibição do layout básico disponível na UI móvel angular.

A estrutura do layout básico é a seguinte

<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>

A tela do seu celular ou desktop é dividida em seções.

Barra Lateral

A seção do corpo começa com os contêineres div da barra lateral, um para o lado esquerdo e o próximo para o lado direito -

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

Uma barra lateral ajuda bem a utilizar o espaço de forma eficiente, especialmente no celular e isso torna a IU muito interativa e organizada. Pela barra lateral, as janelas abrem do lado esquerdo e do lado direito.

Navbars

A próxima seção são as barras de navegação. A seguir estão os contêineres div para as barras de navegação a serem mostradas -

<div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div>
<div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div>

Eles são mostrados na parte superior e na parte inferior.

Seção do corpo do aplicativo

Esta seção é o local principal onde seu conteúdo é exibido para o usuário interagir ou ler.

<div class='app-body'>
   <div class='app-content'>
      <ng-view></ng-view>
   </div>
</div>

Faz uso de <ng-view></ng-view>que será substituída pelo conteúdo real com base na interação do usuário na IU. AngularJS NgRoute é usado aqui para substituir as visualizações.

Modais e sobreposições

A última seção é a seção de modais e sobreposições. O contêiner div para mostrar modais e sobreposições é o seguinte -

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

↰ Previous page Next page ↱