Framework7 - Barras de herramientas

Descripción

La barra de herramientas proporciona un fácil acceso a otras páginas mediante el uso de elementos de navegación en la parte inferior de la pantalla.

Puede utilizar la barra de herramientas de dos formas, tal como se especifica en la tabla:

S. No Tipos de barra de herramientas y descripción
1 Esconder barra de herramientas

Puede ocultar la barra de herramientas automáticamente cuando carga las páginas utilizando el no-toolbar clase a la página cargada.
2 Barra de herramientas inferior

Coloque la barra de herramientas en la parte inferior de la página utilizando el toolbar-bottom clase.

Métodos de la barra de herramientas

Los siguientes métodos disponibles se pueden utilizar con las barras de herramientas:

S. No Métodos y descripción de la barra de herramientas
1

myApp.hideToolbar(toolbar)

Oculta la barra de herramientas especificada.
2

myApp.showToolbar(toolbar)

Muestra la barra de herramientas especificada.
3

view.hideToolbar()

Oculta la barra de herramientas especificada en la vista.
4

view.showToolbar()

Muestra la barra de herramientas especificada en la vista.

Ejemplo

El siguiente ejemplo demuestra el uso del diseño de la barra de herramientas en Framework7.

Primero, crearemos una página HTML llamada toolbar.html como se muestra a continuación -

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Toolbar Layout</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
         
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">Toolbar Layout</div>
               </div>
            </div>
            
            <div class = "pages navbar-through">
               <div data-page = "index" class = "page with-subnavbar">
                  <div class = "page-content">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                        Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                        Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean 
                        sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur. 
                        Sed posuere a orci id imperdiet.</p>
                     
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                        Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                        Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean 
                        sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur. 
                        Sed posuere a orci id imperdiet.</p>
                  </div>
               </div>
            </div>
            
            <div class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">Link 1</a>
                  <a href = "#" class = "link">Link 2</a>
                  <a href = "#" class = "link">Link 3</a>
               </div>
            </div>
            
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         // here initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
         
            // enable the dynamic navbar for this view
            dynamicNavbar: true
         });
      </script>
   </body>

</html>

Ahora, inicialice su aplicación y vistas en el archivo JS personalizado toolbar.js.

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

  • Guarde el código HTML proporcionado anteriormente como toolbar.html archivo en la carpeta raíz de su servidor.

  • Abra este archivo HTML como http: //localhost/toolbar.html y la salida se muestra como se muestra a continuación.