Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi,
I've been task with trying to implement a page that displays a group of articles on a given topic. The number of articles may vary for a given topic. The group of articles are to be displayed in a grid fashion (not a grid component) that utilizes a bootstrap grid implementation in order to keep is responsive for mobile views. For a mobile view, the each box/article would be stacked vertically, one under the other.
Each article is a box on a page, that has own color, displays the type of content, the title, and author. For a desktop view, there will be 3 boxes per row and a new row created for every 3 articles. Here's a example layout.
+--------+ +---------+ +--------+
| title | | title | | title |
| | | | | |
+--------+ +---------+ +--------+
+--------+ +---------+ +--------+
| title | | title | | title |
| | | | | |
+--------+ +---------+ +--------+
+--------+
| title |
| |
+--------+
How can I best implement this in a zul to enable the web designer to customize style instead of implementing this completely in a view model. I believe I can utilize templates to customize each box by content type but I can't seem figure out how to implement in a way a new row create after every 3rd item. I can't use an if attribute based on a each index value as the children of the row wouldn't get created. Is there a way for a forEach to skip every 3 in the index?
Any ideas?
I think a solution in your case is to use the bootstrap grid system directly inside your zul page. The following snippet would give you a hint:
<?style href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" ?>
<window border="none" height="100%" width="100%" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('test.IndexVM')">
<style>
.first-article-in-row {
font-weight: bold; color: #990000;
}
.normal-article {
color: #007A29;
}
</style>
<div sclass="container">
<div children="@load(vm.articles)
@template(forEachStatus.index % 3 eq 0 ? 'row-template' : 'cell-template')">
<template name="row-template">
<div sclass="row" />
<div sclass="col-sm-4 first-article-in-row">
<label value="@load(each.referenceNo)" />
<label value="@load(each.name)" style="font-weight: bold; color: grey;"/>
</div>
</template>
<template name="cell-template">
<div sclass="col-sm-4 normal-article">
<label value="@load(each.referenceNo)" />
<label value="@load(each.name)" style="font-weight: bold;" />
</div>
</template>
</div>
</div>
</window>
In this example we render three articles per row. We use the children pattern to populate a div with data from the view model. The trick is that we use two dynamic templates depending on the index of each element in the list:
@template(forEachStatus.index % 3 eq 0 ? 'row-template' : 'cell-template')
So, every three elements the system will render a new row. If you try this example with some data you should see a responsive page like this:
Hope that helps
/costas
Asked: 2015-08-13 22:34:19 +0800
Seen: 53 times
Last updated: Aug 18 '15