Framework7 - Bilah Status

Deskripsi

IOS 7+ memungkinkan Anda membuat aplikasi layar penuh yang dapat menimbulkan masalah saat bilah status tumpang tindih dengan aplikasi Anda. Framework7 memecahkan masalah ini dengan mendeteksi apakah aplikasi Anda dalam mode layar penuh atau tidak. Jika aplikasi Anda dalam mode layar penuh, Framework7 secara otomatis akan menambahkan kelas dengan-statusbar-overlay ke <html> (atau menghapus jika aplikasi tidak dalam mode layar penuh) dan Anda perlu menambahkan kelas statusbar-overlay di <body> seperti yang ditunjukkan pada kode berikut -

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

Secara default, <div> akan selalu disembunyikan dan diperbaiki di atas layar Anda. Ini hanya akan terlihat ketika aplikasi dalam mode layar penuh dan kelas dengan-statusbar-overlay ditambahkan ke <html> .

Contoh

Contoh berikut menunjukkan penggunaan bilah status di 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>

Keluaran

Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -

Simpan kode html yang diberikan di atas sebagai status_bar.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/status_bar.html dan hasilnya ditampilkan seperti di bawah ini.

Contoh menunjukkan penggunaan file statusbar-overlay, yang memungkinkan Anda membuat aplikasi layar penuh saat bilah status tumpang tindih dengan aplikasi.