English 中文(简体)
Framework7 Tutorial

Framework7 Components

Framework7 Styling

Framework7 Templates

Framework7 Fast Clicks

Framework7 Useful Resources

Selected Reading

Framework7 - Chips
  • 时间：2024-10-18

Framework7 - Chips

Previous Page Next Page  

Description

Chip is a small block of entity, which can contain a photo, small string of title, and short information.

Chips HTML Layout

The following code shows the basic chip HTML layout used in Framework7 −

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

The above HTML layout contains many classes as psted below −

    chips − It is the chip container.

    chip-media − This is the chip media element that can contain images, avatar or icon. It is optional.

    card-label − It is the chip text label.

    card-delete − It is the optional delete icon pnk of a chip.

Example

The following example represents the entities such as albums, card elements etc. along with a photo and brief information −

<!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>
      <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" />
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.material.min.css" />
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.material.colors.min.css" />
   </head>

   <body>
      <span class = "views">
         <span class = "view view-main">
            <span class = "pages">
               
               <span class = "page navbar-fixed">
                  <span class = "navbar">
                     <span class = "navbar-inner">
                        <span class = "center">Chips HTML Layout</span>
                     </span>
                  </span>
                  
                  <span class = "page-content">
                     <span class = "content-block-title">Chips With Text</span>
                     <span class = "content-block">
                        <span class = "chip">
                           <span class = "chip-label">Chip one</span>
                        </span>
                        
                        <span class = "chip">
                           <span class = "chip-label">Chip two</span>
                        </span>
                     </span>
                     
                     <span class = "content-block-title">Chips with icons</span>
                     
                     <span class = "content-block">
                        <span class = "chip">
                           <span class = "chip-media bg-blue"><i class = "icon icon-form-calendar"></i></span>
                           <span class = "chip-label">Set Date</span>
                        </span>
                        
                        <span class = "chip">
                           <span class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></span>
                           <span class = "chip-label">Sent Mail</span>
                        </span>
                     </span>
                     
                     <span class = "content-block-title">Contact Chips</span>
                     
                     <span class = "content-block">
                        <span class = "chip">
                           <span class = "chip-media"><img src = "/framework7/images/pic.jpg"></span>
                           <span class = "chip-label">James Willsmith</span>
                        </span>
                        
                        <span class = "chip">
                           <span class = "chip-media"><img src = "/framework7/images/pic2.jpg"></span>
                           <span class = "chip-label">Sunil Narayan</span>
                        </span>
                        
                        <span class = "chip">
                           <span class = "chip-media bg-pink">R</span>
                           <span class = "chip-label">Raghav</span>
                        </span>
                        
                        <span class = "chip">
                           <span class = "chip-media bg-teal">S</span>
                           <span class = "chip-label">Sharma</span>
                        </span>
                        
                        <span class = "chip">
                           <span class = "chip-media bg-red">Z</span>
                           <span class = "chip-label">Zien</span>
                        </span>
                     </span>
                     
                     <span class = "content-block-title">Deletable Chips</span>
                     
                     <span class = "content-block">
                        <span class = "chip">
                           <span class = "chip-label">Chip one</span>
                           <a href = "#" class = "chip-delete"></a>
                        </span>
                        
                        <span class = "chip">
                           <span class = "chip-media bg-teal">S</span>
                           <span class = "chip-label">Sharma</span>
                           <a href = "#" class = "chip-delete"></a>
                        </span>
                        
                        <span class = "chip">
                           <span class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></span>
                           <span class = "chip-label">Sent</span>
                           <a href = "#" class = "chip-delete"></a>
                        </span>
                        
                        <span class = "chip">
                           <span class = "chip-media"><img src = "/framework7/images/pic.jpg"></span>
                           <span class = "chip-label">James Willsmith</span>
                           <a href = "#" class = "chip-delete"></a>
                        </span>
                        
                        <span class = "chip">
                           <span class = "chip-label">Chip two</span>
                           <a href = "#" class = "chip-delete"></a>
                        </span>
                        
                        <span class = "chip">
                           <span class = "chip-media bg-green">R</span>
                           <span class = "chip-label">Raghav</span>
                           <a href = "#" class = "chip-delete"></a>
                        </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>
         
      <style>
      </style>
      
      <script>
         var myApp = new Framework7 ({
            material: true
         });
         
         var $$ = Dom7;
         $$( .chip-delete ).on( cpck , function (e) {
            e.preventDefault();
            var chip = $$(this).parents( .chip );
             
            myApp.confirm( Do you want to delete this Chip? , function () {
               chip.remove();
            });
         });
      </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 cards_html_layout.html file in your server root folder.

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

    The example represents the complex entities in small blocks such as albums, card elements, posted image, which contains photo, title string and brief information.