Framework7 - Listas agrupadas
Descripción
Puede envolver sus elementos de vista de lista dentro de un bloque de lista única.
Ejemplo
El siguiente ejemplo demuestra el uso de la lista agrupada en la vista de lista de 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>Grouped Lists</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" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">List View Groups</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "list-block">
<div class = "list-group">
<ul>
<li class = "list-group-title">First group</li>
<li class = "item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title">Item title 1</div>
<div class = "item-after">Label</div>
</div>
</li>
<li class = "item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title">Item 1 with badge</div>
<div class = "item-after"> <span class = "badge">78</span></div>
</div>
</li>
<li class = "item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title">Item title 2</div>
<div class = "item-after">Label</div>
</div>
</li>
<li class = "item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title">Item 2 with badge</div>
<div class = "item-after"> <span class = "badge">78</span></div>
</div>
</li>
<li class = "item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title">Item 3</div>
<div class = "item-after">Label</div>
</div>
</li>
</ul>
</div>
<div class = "list-group">
<ul>
<li class = "list-group-title">Second group</li>
<li class = "item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title">Item title 1</div>
<div class = "item-after">Label</div>
</div>
</li>
<li class = "item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title">Item 1 with badge</div>
<div class = "item-after"> <span class = "badge">78</span></div>
</div>
</li>
<li class = "item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title">Item title 2</div>
<div class = "item-after">Label</div>
</div>
</li>
<li class = "item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title">Item 2 with badge</div>
<div class = "item-after"> <span class = "badge">78</span></div>
</div>
</li>
<li class = "item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title">Item 3</div>
<div class = "item-after">Label</div>
</div>
</li>
</ul>
</div>
</div>
<div class = "content-block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras condimentum
molestie diam eu rhoncus. Aliquam a accumsan felis. Morbi magna ipsum, pellentesque
vitae diam mattis, cursus pellentesque lorem. Curabitur orci tortor, feugiat
nec erat non, iaculis iaculis nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras condimentum
molestie diam eu rhoncus. Aliquam a accumsan felis. Morbi magna ipsum, pellentesque
vitae diam mattis, cursus pellentesque lorem. Curabitur orci tortor, feugiat nec erat
non, iaculis iaculis nisi.</p>
</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>
<script>
var myApp = new Framework7();
</script>
</body>
</html>Salida
Realicemos los siguientes pasos para ver cómo funciona el código anterior:
Guarde el código HTML proporcionado anteriormente como list_views_grouped_lists.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/list_views_grouped_lists.html y la salida se muestra como se muestra a continuación.
Este código agrupa los elementos de la vista de lista dentro del bloque de lista única.