Interfaz de usuario angular móvil: componentes

En este capítulo, vamos a comprender los componentes importantes de la interfaz de usuario angular móvil. Son los siguientes:

  • Navbars
  • Sidebars
  • Modals
  • Overlays

Navbars

Las barras de navegación utilizan la parte superior e inferior de la pantalla del dispositivo. Podemos usar la barra de navegación superior para mostrar los elementos del menú o la sección de encabezado. La barra de navegación inferior se puede utilizar para mostrar la sección del pie de página.

Una simple visualización de la barra de navegación en la pantalla es la siguiente:

Navbar se puede mostrar de dos formas: enfoque fijo y de desbordamiento.

Clases CSS importantes

En la interfaz de usuario angular móvil para mostrar la barra de navegación, debe hacer uso de las clases css: barra de navegación, .navbar-app .

Clases para el enfoque de desbordamiento superior / inferior

Para la barra de navegación superior, la clase css: .navbar-absolute-top .

Para la barra de navegación inferior, la clase css: .navbar-absolute-bottom .

Clases para aproximación fija superior / inferior

Para la barra de navegación superior, la clase css: .navbar-fixed-top .

Para la barra de navegación inferior, la clase css: .navbar-fixed-bottom .

Trabajemos en la barra de navegación de desbordamiento en la interfaz de usuario.

A continuación se muestra el código HTML para el mismo:

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>

Así es como se ve la pantalla:

Barras laterales

Las barras laterales ocupan el lado izquierdo y derecho de la pantalla. Siempre están ocultos y activados cuando se hace clic en el elemento conectado al lado izquierdo o derecho. Es la mejor forma de utilizar el espacio en la pantalla.

Hasta ahora hemos visto el funcionamiento de las barras de navegación. Ahora hagamos uso del elemento de la barra de navegación en el lado izquierdo y derecho para abrir las barras laterales.

Puede colocar barras laterales en el lado izquierdo o derecho.

Clases CSS importantes

Las clases de CSS para la barra lateral izquierda : barra lateral barra lateral izquierda .

Las clases de CSS para la barra lateral derecha - barra lateral barra lateral derecha .

El contenedor div para la barra lateral es el siguiente:

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

Interacción con las barras laterales

Para abrir y cerrar las barras laterales agregadas en el lado izquierdo y derecho, debe agregar lo siguiente a la etiqueta html que abrirá las barras laterales.

Por ejemplo, para abrir la barra lateral izquierda al hacer clic en un enlace, puede agregar lo siguiente:

Sidebar hace uso de sharedstate uiSidebarLeft y uiSidebarRight para alternar los elementos de la barra lateral.

Vamos a hacer uso de la barra de navegación superior que agregamos anteriormente. Agregue ui-toggle = ”uiSidebarLeft” y ui-toggle = "uiSidebarRight" y también la clase sidebar-toggle y 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>

Agreguemos ahora un contenedor div para la barra lateral izquierda y la barra lateral derecha.

Barra lateral izquierda

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

Puedes hacer uso de ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarRight'en la plantilla de la barra lateral para cerrar la barra lateral cuando se hace clic en cualquier lugar dentro de la barra lateral. La barra lateral se cerrará de forma predeterminada cuando se haga clic en cualquier lugar fuera de la plantilla de la barra lateral.

En la barra lateral izquierda cuando el usuario hace clic en los enlaces, la barra lateral se cerrará como hemos agregado ui-turn-off='uiSidebarLeft' a la plantilla de la barra lateral izquierda.

Barra lateral derecha

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

La visualización de la barra lateral en el navegador es la siguiente:

Haga clic en Tutoriales para obtener el menú de la barra lateral izquierda como se muestra a continuación:

Haga clic en Ebooks para obtener el menú del lado derecho como se muestra a continuación:

Modales y superposiciones

Modales y superposiciones mostrarán una ventana de tipo emergente en su pantalla. Las superposiciones difieren de las modales solo en cómo se muestra el contenedor.

Necesitas hacer uso de ngIf/uiIf o ngHide/uiHide junto con uiState para activar / descartar la superposición o modal.

El CSS para modal será .modaly para superposición, será .modal-overlay.

Para mostrar modal y superposición, agregue el siguiente contenedor div dentro de su index.html.

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

Asignemos un modal al pie de página de la barra de navegación que hemos hecho anteriormente.

Aquí ACERCA DE NOSOTROS actuará como modal y CONTÁCTENOS actuará como una superposición.

Agregue los siguientes cambios a los enlaces de ACERCA DE NOSOTROS y CONTÁCTENOS -

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

Si hacemos clic en este enlace, se abrirán el modal y la superposición.

Se agrega el contenido para modal y superposición inside src/home/home.html archivo.

El contenido principal para modal y superposición debe estar envuelto dentro del siguiente contenedor div:

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

Agreguemos contenido a la vista modal y superpuesta. El nombre que hemos usado en los enlaces, es decir,ui-turn-on="aboutus_modal" and ui-turn-on="contactus_overlay", los mismos se utilizan en el interior para el aboutus contenido modal y contactus superposición de contenido.

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

La pantalla para modal y superposición es la siguiente:

Al hacer clic en ACERCA DE NOSOTROS, se mostrará modal como se muestra a continuación:

Al hacer clic en CONTÁCTENOS, se mostrará una superposición como se muestra a continuación:

Haga clic en el botón cerrar para cerrar la ventana modal.