Framework7 - Barra de Status

Descrição

O iOS 7+ permite que você crie aplicativos de tela inteira que podem criar um problema quando a barra de status se sobrepõe ao aplicativo. Framework7 resolve esse problema detectando se seu aplicativo está no modo de tela inteira ou não. Se seu aplicativo estiver no modo de tela inteira, o Framework7 adicionará automaticamente a classe with-statusbar-overlay a <html> (ou removerá se o aplicativo não estiver no modo de tela inteira) e você precisará adicionar a classe statusbar-overlay em <body> conforme mostrado no código a seguir -

<html class = "with-statusbar-overlay">
...
   <body>
      <div class = "statusbar-overlay"></div>
      ...

Por padrão, <div> sempre estará oculto e fixo na parte superior da tela. Ele só estará visível quando o aplicativo estiver no modo de tela inteira e a classe with-statusbar-overlay for adicionada a <html> .

Exemplo

O exemplo a seguir demonstra o uso da barra de status no Framework7 -

<!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>My App</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 = "statusbar-overlay"></div>
      <div class = "panel-overlay"></div>
      
      <div class = "panel panel-right panel-reveal">
         <div class = "content-block">
            <p>Contents goes here...</p>
         </div>
      </div>
      
      <div class = "views">
         <div class = "view view-main">
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">My App</div>
                  
                  <div class = "right">
                     <a href = "#" class = "link icon-only open-panel"><i class = "icon icon-bars"></i></a>
                  </div>
                  
               </div>
            </div>
            
            <div class = "pages navbar-through toolbar-through">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                     <p>This is simple application...</p>
                     <p>page contents goes here!!!</p>
                  </div>
               </div>
            </div>
            
            <div class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">First Link</a>
                  <a href = "#" class = "link">Second Link</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
         });

         //use the 'pageInit' event handler for all pages
         $$(document).on('pageInit', function (e) {
            //get page data from event data
            var page = e.detail.page;
         })
      </script>
   </body>

</html>

Resultado

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

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

O exemplo mostra o uso do statusbar-overlay, que permite criar aplicativos de tela inteira quando sua barra de status se sobrepõe ao aplicativo.

↰ Previous page Next page ↱