Framework7 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>  

Test it Now

Next TopicFramework7 Buttons

Framework7 Chips

Framework7 Chips

Chips HTML Layout

Example

Income tax calculating formula in Excel

Framework7 Inline Tabs

You may also like