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"