UI móvel angular - componentes

Neste capítulo, vamos entender os componentes importantes da IU angular móvel. Eles são os seguintes -

Navbars
Sidebars
Modals
Overlays

Navbars

As barras de navegação usam as partes superior e inferior da tela do dispositivo. Podemos usar a barra de navegação superior para exibir os itens do menu ou a seção do cabeçalho. A barra de navegação inferior pode ser usada para exibir a seção de rodapé.

Uma simples exibição da barra de navegação na tela é a seguinte -

Navbar pode ser mostrado de duas maneiras: abordagem fixa e overflow.

Classes CSS importantes

No Mobile Angular UI, para mostrar a navbar, você deve usar classes css - navbar, .navbar-app .

Classes para abordagem de estouro superior / inferior

Para a barra de navegação superior, a classe css - .navbar-absolute-top .

Para a barra de navegação inferior, a classe css - .navbar-absolute-bottom .

Classes para abordagem fixa superior / inferior

Para a barra de navegação superior, a classe css - .navbar-fixed-top .

Para a barra de navegação inferior, a classe css - .navbar-fixed-bottom .

Vamos trabalhar no Overflow Navbar na IU.

A seguir está o código HTML para o mesmo -

Navbar-Top

<div class="navbar navbar-app navbar-absolute-top">
   <div class="btn-group pull-left">
      <div class="btn">
         <i class="fa fa-th-large "></i> Library
      </div>
   </div>
   <div class="navbar-brand navbar-brand-center" ui-yield-to="title">
      TutorialsPoint
   </div>
   <div class="btn-group pull-right" ui-yield-to="navbarAction">
      <div class="btn">
         <i class="fal fa-search"></i> eBooks
      </div>
   </div>
</div>

Navbar-Bottom

<div class="navbar navbar-app navbar-absolute-bottom">
   <div class="btn-group justified">
      <a href="https://www.tutorialspoint.com/about/index.htm" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
      <a href="https://www.tutorialspoint.com/about/contact_us.htm" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
   </div>
</div>

É assim que a tela se parece -

Barras Laterais

As barras laterais ocupam os lados esquerdo e direito da tela. Eles estão sempre ocultos e ativados quando o item conectado ao lado esquerdo ou direito é clicado. É a melhor maneira de utilizar o espaço da tela.

Até agora vimos o funcionamento de navbars. Vamos agora usar o item da barra de navegação à esquerda e à direita para abrir as barras laterais.

Você pode colocar as barras laterais no lado esquerdo ou direito.

Classes CSS importantes

As classes css para a barra lateral esquerda - barra lateral esquerda .

As classes css para a barra lateral direita - barra lateral direita .

O contêiner div para a barra lateral é o seguinte -

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

Interação com barras laterais

Para abrir e fechar as barras laterais adicionadas à esquerda e à direita, você precisa adicionar o seguinte à tag html que abrirá as barras laterais.

Por exemplo, para abrir a barra lateral esquerda ao clicar em um link, você pode adicionar o seguinte -

A barra lateral usa sharedstate uiSidebarLeft e uiSidebarRight para alternar os itens da barra lateral.

Vamos usar a barra de navegação superior que adicionamos anteriormente. Adicione ui-toggle = ”uiSidebarLeft” e ui-toggle = "uiSidebarRight" e também as classes sidebar-toggle e sidebar-right-toggle.

<div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle"><i class="fa fa-th-large "></i> Library</div>

<div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle"><i class="fal fa-search"></i> Search</div>

Vamos agora adicionar um contêiner div para a barra lateral esquerda e a barra lateral direita.

Barra Lateral Esquerda

<div class="sidebar sidebar-left">
   <div class="scrollable">
      <h1 class="scrollable-header app-name">Tutorials</h1>
      <div class="scrollable-content">
         <div class="list-group" ui-turn-off='uiSidebarLeft'>
            <a class="list-group-item" href="/">Home Page </a>
            <a class="list-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
            <a class="list-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
            <a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
            <a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
            <a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
            <a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
         </div>
      </div>
   </div>
</div>

Você pode fazer uso de ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarRight'em seu modelo de barra lateral para fechar a barra lateral quando clicado em qualquer lugar dentro da barra lateral. A barra lateral será fechada por padrão quando clicada em qualquer lugar fora do modelo da barra lateral.

Na barra lateral esquerda, quando o usuário clicar nos links, a barra lateral será fechada conforme adicionamos ui-turn-off='uiSidebarLeft' para o modelo da barra lateral esquerda.

Barra lateral direita

<div class="sidebar sidebar-right">
   <div class="scrollable">
      <h1 class="scrollable-header app-name">eBooks</h1>
      <div class="scrollable-content">
         <div class="list-group" ui-toggle="uiSidebarRight">
            <a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
            <a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
         </div>
      </div>
   </div>
</div>

A exibição da barra lateral no navegador é a seguinte -

Clique em Tutoriais para obter o menu da barra lateral esquerda, conforme mostrado abaixo -

Clique em Ebooks para obter o menu do lado direito, conforme mostrado abaixo -

Modais e sobreposições

Modais e sobreposições mostrarão uma janela tipo pop-up em sua tela. As sobreposições diferem do modal apenas na forma como o contêiner é exibido para elas.

Você precisa fazer uso de ngIf/uiIf ou ngHide/uiHide junto com uiState para ativar / dispensar a sobreposição ou modal.

O css para modal será .modal, e para sobreposição, será .modal-overlay.

Para mostrar modal e sobreposição, adicione o seguinte contêiner div dentro de seu index.html.

<div ui-yield-to="modals"></div>

Vamos atribuir um modal ao rodapé da barra de navegação que fizemos anteriormente.

Aqui, SOBRE NÓS atuará como modal e CONTATO CONOSCO atuará como sobreposição.

Adicione as seguintes alterações aos links SOBRE NÓS e FALE CONOSCO -

<div class="navbar navbar-app navbar-absolute-bottom">
   <div class="btn-group justified">
      <a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
      <a ui-turn-on="contactus_overlayl" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
   </div>
</div>

Se clicarmos neste link, o modal e a sobreposição serão abertos.

O conteúdo do modal e da sobreposição é adicionado inside src/home/home.html Arquivo.

O conteúdo principal para modal e sobreposição deve ser agrupado dentro do seguinte contêiner div -

<div ui-content-for="modals">
   <div class="modal"><!-- ... --></div>
</div>

Vamos adicionar conteúdo à visualização modal e sobreposta. O nome que usamos nos links, ou seja,ui-turn-on="aboutus_modal" and ui-turn-on="contactus_overlay", os mesmos são usados dentro para o aboutus conteúdo modal e contactus conteúdo de sobreposição.

<div ui-content-for="modals">
   <div class="modal" ui-if="aboutus_modal" ui-shared-state="aboutus_modal">
      <div class="modal-backdrop in"></div>
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <button class="close"
                  ui-turn-off="aboutus_modal">×</button>
               <h4 class="modal-title">Modal</h4>
            </div>
            <div class="modal-body">
               <p>Testing Modal</p>
            </div>
            <div class="modal-footer">
               <button ui-turn-off="aboutus_modal" class="btn btn-default">Close</button>
               <button ui-turn-off="aboutus_modal" class="btn btn-primary">Save</button>
            </div>
         </div>
      </div>
   </div>
   <div class="modal modal-overlay" ui-if="contactus_overlay" ui-shared-state="contactus_overlay">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <button class="close"
                  ui-turn-off="contactus_overlay">×</button>
               <h4 class="modal-title">Overlay</h4>
            </div>
            <div class="modal-body">
               <p>Testing Overlay</p>
            </div>
            <div class="modal-footer">
               <button ui-turn-off="contactus_overlay" class="btn btn-default">Close</button>
               <button ui-turn-off="contactus_overlay" class="btn btn-primary">Save</button>
            </div>
         </div>
      </div>
   </div>
</div>

A exibição de modal e sobreposição é a seguinte -

Ao clicar em SOBRE NÓS, o modal será exibido conforme mostrado abaixo -

Ao clicar em FALE CONOSCO, ele exibirá a sobreposição conforme mostrado abaixo -

Clique no botão Fechar para fechar a janela modal.

↰ Previous page Next page ↱