CardViewΒΆ
-
/libs/granite/ui/components/foundation/layouts/cardview
The layout to render the items as cards in a grid layout. It implements foundation-selections vocabulary.
It has the following content structure at the layout resource:
- granite:LayoutsCardView
- srcstringel
The URI Template that is returning the HTML response for pagination. It supports the following variables:
- offset
- The item offset of the current request.
- limit
- The item limit of the pagination.
- id
- The id of the collection (
[data-foundation-collection-id]
).
e.g.
/a/b/c{.offset,limit}.html{+id}
- pathstringel
The path of the current collection. It will act as the value of
[data-foundation-collection-id]
.e.g.
${requestPathInfo.suffix}
- selectionModebooleanel
true
to initially display it in selection mode;false
otherwise.
- maximizedboolean
true
to expand the layout to its parent container;false
otherwise.
- limitlong
The item limit of the pagination.
- stateIdstring
The id of the client-side state for this layout.
The following states are saved:
- The active layout
- See
layoutId
property. - Selection mode
- The selection mode change the user makes will be saved. It will be available as
<stateId>.selectionMode
key.
- layoutIdstring
The name associated with this layout.
The client-side state with key
<stateId>.layoutId
will have the value of this name.This is useful when MultiLayouts is used, so that when the user refreshes the browser, the active layout can be restored by the MultiLayouts.
It will only be effective when
stateId
property is set.
- itempropstring
The
itemprop
attribute of each item.
The items of the layout are specified using ItemDataSource.
Example:
+ mycards - sling:resourceType = "granite/ui/components/foundation/container" + layout - sling:resourceType = "granite/ui/components/foundation/layouts/cardview" - stateId = "cq.sites.childpages" - layoutId = "card" - selectionMode = '${state["cq.sites.childpages.selectionMode"].boolean}' - src = "/a/b/c{.offset,limit}.html" + datasource - sling:resourceType = "my/datasource"