Framework7 - Content Block-alljchome-开发者的教程家园

Framework7 Tutorial

Framework7 Components

Framework7 Styling

Framework7 Templates

Framework7 Fast Clicks

Framework7 Useful Resources

Selected Reading

Framework7 - Content Block

Description

Content blocks can be used to add extra content with different format.

Example

The following example demonstrates the use of content block in 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>Content Block</title>
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.min.css" />
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <span class = "views">
         <span class = "view view-main">
            <span class = "pages">
               <span data-page = "home" class = "page navbar-fixed">
                  
                  <span class = "navbar">
                     <span class = "navbar-inner">
                        <span class = "left"> </span>
                        <span class = "center">Content Block</span>
                        <span class = "right"> </span>
                     </span>
                  </span>
                  
                  <span class = "page-content">
                     <p>This is out side of content block!!!</p>
                     
                     <span class = "content-block">
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis 
                        et quasi architecto beatae vitae dicta sunt exppcabo.</p>
                     </span>
                     
                     <span class = "content-block">
                        <span class = "content-block-inner">This is another text block wrapped with "content-block-inner"</span>
                     </span>
                     
                     <span class = "content-block-title">Content Block Title</span>
                     
                     <span class = "content-block">
                        <p>Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur 
                        magna nec, viverra sem. Apquam sed risus dolor. Morbi tincidunt ut pbero id sodales. 
                        Integer blandit varius nisi quis consectetur.</p>
                     </span>
                     
                     <span class = "content-block-title">This is another long content block title</span>
                     
                     <span class = "content-block">
                        <span class = "content-block-inner">
                           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                           accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo 
                           inventore veritatis et quasi architecto beatae vitae dicta sunt exppcabo.</p>
                        </span>
                     </span>
                     
                     <span class = "content-block-title">Content Block Inset</span>
                     
                     <span class = "content-block inset">
                        <span class = "content-block-inner">
                           <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. 
                           Suspendisse molestie vept vitae mattis tincidunt. Ut sit amet quam molps, 
                           vulputate turpis vel, sagittis feps. </p>
                        </span>
                     </span>
                     
                     <span class = "content-block-title">Content Block Tablet Inset</span>
                     
                     <span class = "content-block tablet-inset">
                        <span class = "content-block-inner">
                           <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
                           Suspendisse molestie vept vitae mattis tincidunt. Ut sit amet quam molps, 
                           vulputate turpis vel, sagittis feps. </p>
                        </span>
                     </span>
                     
                  </span>
               </span>
            </span>
         </span>
      </span>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
         var mainView = myApp.addView( .view-main );
      </script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given HTML code as content_block.html file in your server root folder.

Open this HTML file as http://localhost/content_block.html and the output is displayed as shown below.

The code adds extra formatting and required spacing for the text content.