Framework7 - Barre d'état

La description

L'iOS 7+ vous permet de créer des applications en plein écran qui pourraient créer un problème lorsque votre barre d'état chevauche votre application. Framework7 résout ce problème en détectant si votre application est en mode plein écran ou non. Si votre application est en mode plein écran, le Framework7 ajoutera automatiquement la classe with-statusbar-overlay à <html> (ou supprimera si l'application n'est pas en mode plein écran) et vous devez ajouter la classe statusbar-overlay dans <body> comme indiqué dans le code suivant -

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

Par défaut, <div> sera toujours masqué et fixé en haut de votre écran. Il ne sera visible que lorsque l'application est en mode plein écran et que la classe with-statusbar-overlay est ajoutée à <html> .

Exemple

L'exemple suivant montre l'utilisation de la barre d'état dans le 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>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code html ci-dessus sous status_bar.html fichier dans le dossier racine de votre serveur.

  • Ouvrez ce fichier HTML comme http: //localhost/status_bar.html et la sortie s'affiche comme indiqué ci-dessous.

L'exemple montre l'utilisation du statusbar-overlay, qui vous permet de créer des applications en plein écran lorsque votre barre d'état chevauche l'application.