Framework7 - Barras de Ferramentas

Descrição

A barra de ferramentas fornece acesso fácil a outras páginas usando elementos de navegação na parte inferior da tela.

Você pode usar a barra de ferramentas de duas maneiras, conforme especificado na tabela -

S.Não	Tipos e descrição da barra de ferramentas
1	Ocultar barra de ferramentas Você pode ocultar a barra de ferramentas automaticamente ao carregar as páginas usando o no-toolbar classe para a página carregada.
2	Barra de Ferramentas Inferior Coloque a barra de ferramentas na parte inferior da página usando o toolbar-bottom classe.

Métodos de barra de ferramentas

Os seguintes métodos disponíveis podem ser usados com as barras de ferramentas -

S.Não	Métodos e descrição da barra de ferramentas
1	myApp.hideToolbar(toolbar) Ele oculta a barra de ferramentas especificada.
2	myApp.showToolbar(toolbar) Mostra a barra de ferramentas especificada.
3	view.hideToolbar() Ele oculta a barra de ferramentas especificada na visualização.
4	view.showToolbar() Mostra a barra de ferramentas especificada na visualização.

Exemplo

O exemplo a seguir demonstra o uso do layout da barra de ferramentas no Framework7.

Primeiro, vamos criar uma página HTML chamada toolbar.html como mostrado abaixo -

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

Agora, inicialize seu aplicativo e exiba no arquivo JS personalizado toolbar.js.

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -

Salve o código HTML fornecido acima como toolbar.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/toolbar.html e a saída é exibida conforme mostrado abaixo.