Framework7 - Chips

Framework7芯片 - 从概述，环境，布局，导航栏，工具栏，搜索栏，状态栏，侧面板，内容块，布局网格，叠加层，预加载器，进度条，列表视图，手风琴，卡片，芯片，按钮开始学习Framework7动作按钮，表单，选项卡，Swiper滑块，照片浏览器，自动完成，选择器，日历，刷新，无限滚动，消息，消息栏，通知，延迟加载，颜色主题，细线，模板概述，自动编译，Template7页面，活动状态，点按保持事件，触摸波纹。

描述

Chip是一个小块实体，可以包含照片，小标题和短信息.

芯片HTML布局

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

Jane Doe

上面的HTML布局包含下面列出的许多类 :

chips : 它是芯片容器.
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 文件.
将此HTML文件打开为http://localhost/cards_html_layout.html，输出显示如下.
该示例代表小块中的复杂实体，例如相册，卡片元素，已发布图片，其中包含照片，标题字符串和简要信息.