Masonry

amx:masonryLayout, amx:masonryLayoutItem

Masonry allows tiles arranged in a grid layout like a dashboard. Tiles are arbitrary components that are children of the grid layout component. Tiles can span multiple colums and/or rows in the grid. The layout tries to make the best use of space by positioning tiles where they fit, for example by filling gaps left earlier in the layout.

This component is commonly used on tablets and phones.

Appearance

Appearance characteristics for this component.

Behavior

Common behaviors for this component.

Usage

Usage guidelines for this component.

Sample

AMX sample code for this component.

<amx:masonryLayout id="ml1">

<amx:masonryLayoutItem id="mlt1" dimension="#{pageFlowScope.tile1Expanded ? '3x1' : '1x1'}" rendered="#{pageFlowScope.tile1Rendered}">
 ... tile content ...   
<amx:commandLink id="cl1" className="amx-masonryLayoutItem-resizeButton">
<amx:setPropertyListener id="spl1" from="#{!pageFlowScope.tile1Expanded}" to="#{pageFlowScope.tile1Expanded}"/>
</amx:commandLink>

<amx:commandLink id="cl2" className="amx-masonryLayoutItem-closeButton">
<amx:setPropertyListener id="spl2" from="#{!pageFlowScope.tile1Rendered}" to="#{pageFlowScope.tile1Rendered}"/>
</amx:commandLink>

</amx:masonryLayoutItem>

<amx:masonryLayoutItem id="mlt2" dimension="#{pageFlowScope.tile2Expanded ? '1x2' : '1x1'}" rendered="#{pageFlowScope.tile2Rendered}">
  ... tile content ...  
<amx:commandLink id="cl3" className="amx-masonryLayoutItem-resizeButton">          
<amx:setPropertyListener id="spl3" from="#{!pageFlowScope.tile2Expanded}" to="#{pageFlowScope.tile2Expanded}"/>
</amx:commandLink>

<amx:commandLink id="cl4" className="amx-masonryLayoutItem-closeButton">
<amx:setPropertyListener id="spl4" from="#{!pageFlowScope.tile2Rendered}" to="#{pageFlowScope.tile2Rendered}"/>
</amx:commandLink>

</amx:masonryLayoutItem>
</amx:masonryLayout>

Related

Fig 1. iOS Masonry

 

Fig 2. Android Masonry