Framework7 芯片

2025年3月17日 | 阅读 3 分钟

在 Framework7 中，芯片是小的实体块，可以包含照片、小标题字符串和简短信息。

芯片 HTML 布局

让我们看看 Framework7 中使用的基本芯片 HTML 布局

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

其中

<div class="chip"> 是芯片容器
<div class="chip-media"> 是芯片“媒体”元素，可以包含图像/头像或图标。可选。
<div class="card-label"> 是芯片文本标签。
<a class="card-delete"> 是芯片删除图标链接。可选。

示例

让我们举一个例子来演示 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>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>

立即测试

下一个主题Framework7 按钮

← 上一个下一个 →

Framework7 芯片

芯片 HTML 布局

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Framework7 教程

Framework7 表单

Framework7 选项卡

F7 Swiper 滑块

F7 图片浏览器

F7 选择器

F7 日历

F7 杂项

面试题

Framework7 芯片

芯片 HTML 布局

示例

相关帖子

F7 手风琴

F7 侧边栏

F7 覆盖层

F7 预加载器

F7 布局网格

Framework7 安装

F7 工具栏

F7 导航栏

F7 内容块

Framework7 教程

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器