Description
Chip is a small block of entity which can contain a photo, small string of title, and short information.
Chips HTML Layout
The below code shows 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>
The above HTML layout contains many classes as listed below:
- chips - It is the chip container.
- chip-media - This is the chip media element that can contain images, avatar or icon. It is optional.
- card-label - It is the chip text label.
- card-delete - It is the optional delete icon link of a chip.
Example
The below example represents the entities such as albums, card elements etc along with a photo and brief information:
<!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">James Willsmith</div>
</div>
<div class="chip">
<div class="chip-media"><img src="/framework7/images/pic2.jpg"></div>
<div class="chip-label">Sunil Narayan</div>
</div>
<div class="chip">
<div class="chip-media bg-pink">R</div>
<div class="chip-label">Raghav</div>
</div>
<div class="chip">
<div class="chip-media bg-teal">S</div>
<div class="chip-label">Sharma</div>
</div>
<div class="chip">
<div class="chip-media bg-red">Z</div>
<div class="chip-label">Zien</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">Sharma</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">James Willsmith</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">R</div>
<div class="chip-label">Raghav</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>
Output
Let's carry out the following steps to see how above code works:
- Save above HTML code as cards_html_layout.html file in your server root folder.
- Open this HTML file as http://localhost/cards_html_layout.html and output as below gets displayed.
- The example represents the complex entities in small blocks such
as albums, card elements, posted image which contain photo, title string
and brief information.
No comments:
Post a Comment