Framework7 chip布局 Framework7chip布局|Framework7

在Framework7中, chip是一小块实体, 可以包含照片, 小标题字符串和简短信息。
chip HTML布局让我们看看Framework7中使用的基本 chip 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 = "http://www.srcmini.com/#" class = "chip-delete"> < /a> < /div>

这里：

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

例
让我们以一个示例来演示Framework7 chip ：

< !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 = "http://www.srcmini.com/framework7/images/pic.jpg"> < /div> < div class = "chip-label"> Aman Verma< /div> < /div> < div class = "chip"> < div class = "chip-media"> < img src = "http://www.srcmini.com/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 = "http://www.srcmini.com/#" class = "chip-delete"> < /a> < /div> < div class = "chip"> < div class = "chip-media bg-teal"> S< /div> < div class = "chip-label"> Rahul< /div> < a href = "http://www.srcmini.com/#" 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 = "http://www.srcmini.com/#" class = "chip-delete"> < /a> < /div> < div class = "chip"> < div class = "chip-media"> < img src = "http://www.srcmini.com/framework7/images/pic.jpg"> < /div> < div class = "chip-label"> Aman Verma< /div> < a href = "http://www.srcmini.com/#" class = "chip-delete"> < /a> < /div> < div class = "chip"> < div class = "chip-label"> Chip two< /div> < a href = "http://www.srcmini.com/#" class = "chip-delete"> < /a> < /div> < div class = "chip"> < div class = "chip-media bg-green"> P< /div> < div class = "chip-label"> Pretty< /div> < a href = "http://www.srcmini.com/#" 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 chip布局】立即测试