📌  相关文章
📜  Framework7-芯片

📅  最后修改于: 2020-10-25 02:52:11             🧑  作者: Mango

描述

筹码是一小块实体，可以包含照片，小标题字符串和简短信息。

芯片HTML布局

以下代码显示了Framework7中使用的基本芯片HTML布局-


   

      
   

   
   
Jane Doe

上面的HTML布局包含许多类，如下所列-

  • 芯片-这是芯片容器。

  • chip-media-这是芯片媒体元素，可以包含图像，头像或图标。它是可选的。

  • card-label-这是芯片文本标签。

  • card-delete-这是芯片的可选删除图标链接。

例

以下示例表示实体，例如相册，卡片元素等以及照片和简要信息-


      
      
      Chips HTML Layout
      
      
      
      
   

   
      

         

            

               
               

                  

                     

                        
Chips HTML Layout

                     

                  

                  
                  

                     
Chips With Text

                     

                        

                           
Chip one

                        

                        
                        

                           
Chip two

                        

                     

                     
                     
Chips with icons

                     
                     

                        

                           

                           
Set Date

                        

                        
                        

                           

                           
Sent Mail

                        

                     

                     
                     
Contact Chips

                     
                     

                        

                           

                           
James Willsmith

                        

                        
                        

                           

                           
Sunil Narayan

                        

                        
                        

                           
R

                           
Raghav

                        

                        
                        

                           
S

                           
Sharma

                        

                        
                        

                           
Z

                           
Zien

                        

                     

                     
                     
Deletable Chips

                     
                     

                        

                           
Chip one

                           
                        

                        
                        

                           
S

                           
Sharma

                           
                        

                        
                        

                           

                           
Sent

                           
                        

                        
                        

                           

                           
James Willsmith

                           
                        

                        
                        

                           
Chip two

                           
                        

                        
                        

                           
R

                           
Raghav

输出

让我们执行以下步骤，看看上面给出的代码如何工作-

  • 将上述指定的HTML代码另存为服务器根文件夹中的cards_html_layout.html文件。

  • 以http：//localhost/cards_html_layout.html格式打开此HTML文件，并显示如下所示的输出。

  • 该示例以小块表示复杂的实体，例如相册，卡片元素，发布的图像，其中包含照片，标题字符串和简要信息。