Framework7 Chips

chips

In Framework7, chips are the small block of entity which can contain a photo, small string of title, and short information.

Chips HTML Layout

Let’s see the basic chip HTML layout used in Framework7:

<div class = "chip">  
   <div class = "chip-media">  
      <img src = "http://lorempixel.com/100/100/people/9/">  
   </div>  
   <div class = "chip-label">Jane Doe</div>  
   <a href = "#" class = "chip-delete"></a>  
</div>  

Here:

  • <div class=”chip”> is chip container
  • <div class=”chip-media”> is chip “media” element, can contain image/avatar or icon. Optional.
  • <div class=”card-label”> is chip text label.
  • <a class=”card-delete”> is chip delete icon-link. Optional.

Example

Let’s take an example to demonstrate Framework7 chips:

<!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>Chips HTML 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" />  
      <link rel = "stylesheet"   
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />  
      <link rel = "stylesheet"   
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />  
   </head>  
   <body>  
      <div class = "views">  
         <div class = "view view-main">  
            <div class = "pages">  
                 
               <div class = "page navbar-fixed">  
                  <div class = "navbar">  
                     <div class = "navbar-inner">  
                        <div class = "center">Chips HTML Layout</div>  
                     </div>  
                  </div>  
                    
                  <div class = "page-content">  
                     <div class = "content-block-title">Chips With Text</div>  
                     <div class = "content-block">  
                        <div class = "chip">  
                           <div class = "chip-label">Chip one</div>  
                        </div>                          
                        <div class = "chip">  
                           <div class = "chip-label">Chip two</div>  
                        </div>  
                     </div>  
                       
                     <div class = "content-block-title">Chips with icons</div>  
                       
                     <div class = "content-block">  
                        <div class = "chip">  
                           <div class = "chip-media bg-blue"><i class = "icon icon-form-calendar"></i></div>  
                           <div class = "chip-label">Set Date</div>  
                        </div>                          
                        <div class = "chip">  
                           <div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div>  
                           <div class = "chip-label">Sent Mail</div>  
                        </div>  
                     </div>                       
                     <div class = "content-block-title">Contact Chips</div>                           
                     <div class = "content-block">  
                        <div class = "chip">  
                           <div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div>  
                           <div class = "chip-label">Aman Verma</div>  
                        </div>                         
                        <div class = "chip">  
                           <div class = "chip-media"><img src = "/framework7/images/pic2.jpg"></div>  
                           <div class = "chip-label">Raman Raghav</div>  
                        </div>                          
                        <div class = "chip">  
                           <div class = "chip-media bg-pink">R</div>  
                           <div class = "chip-label">Rahul</div>  
                        </div>                          
                        <div class = "chip">  
                           <div class = "chip-media bg-teal">S</div>  
                           <div class = "chip-label">Sunny</div>  
                        </div>                          
                        <div class = "chip">  
                           <div class = "chip-media bg-red">P</div>  
                           <div class = "chip-label">Pretty</div>  
                        </div>  
                     </div>                       
                     <div class = "content-block-title">Deletable Chips</div>                      
                     <div class = "content-block">  
                        <div class = "chip">  
                           <div class = "chip-label">Chip one</div>  
                           <a href = "#" class = "chip-delete"></a>  
                        </div>                          
                        <div class = "chip">  
                           <div class = "chip-media bg-teal">S</div>  
                           <div class = "chip-label">Rahul</div>  
                           <a href = "#" class = "chip-delete"></a>  
                        </div>                          
                        <div class = "chip">  
                           <div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div>  
                           <div class = "chip-label">Sent</div>  
                           <a href = "#" class = "chip-delete"></a>  
                        </div>                          
                        <div class = "chip">  
                           <div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div>  
                           <div class = "chip-label">Aman Verma</div>  
                           <a href = "#" class = "chip-delete"></a>  
                        </div>                         
                        <div class = "chip">  
                           <div class = "chip-label">Chip two</div>  
                           <a href = "#" class = "chip-delete"></a>  
                        </div>                          
                        <div class = "chip">  
                           <div class = "chip-media bg-green">P</div>  
                           <div class = "chip-label">Pretty</div>  
                           <a href = "#" class = "chip-delete"></a>  
                        </div>  
                     </div>                      
                  </div>  
               </div>  
            </div>  
         </div>  
      </div>        
      <script type = "text/javascript"   
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>          
      <style>  
      </style>        
      <script>  
         var myApp = new Framework7 ({  
            material: true  
         });           
         var $$ = Dom7;  
         $$('.chip-delete').on('click', function (e) {  
            e.preventDefault();  
            var chip = $$(this).parents('.chip');               
            myApp.confirm('Do you want to delete this Chip?', function () {  
               chip.remove();  
            });  
         });  
      </script>  
   </body>  
</html>  

This Post Has One Comment

Leave a Reply