sections.fluidgrid.dynamic.xhtml Maven / Gradle / Ivy
The newest version!
FluidGrid allows to set up a nice tight grid with items that have variable heights and widths.
FluidGrid is a responsive grid. That means, the grid will reflow as the window size changes.
Items can have any content: text, images, links, input fields, etc.
They can be defined in a static or in a dynamic way as in data iteration components.
This example demonstrates a simple usage with dynamic items. Dynamic items can be put in a collection or list
of FluidGridItem instances. A FluidGridItem instance contains
a data object (of any data types) and an optional type property to match the type attribute in
pe:fluidGridItem (see the example with dynamic form).
Dynamic items can be accessed in XHTML via the value attribute and exposed
via the var attribute. Click on the button below and resize the browser to test the fluid grid!
Note: The attribute hasImages is set to true to fix overlapping of items
which are caused by unloaded images. If this attribute is set to true, the grid layout will be triggered
after all images have been loaded and items have their proper sizes. The example also demonstrates
the event layoutComplete which is fired after a layout of fluid grid and all
positioning transitions have been completed.
${showcase:getFileContent('/sections/fluidgrid/examples/example-dynamic.xhtml')}
${showcase:getFileContent('/org/primefaces/extensions/showcase/controller/fluidgrid/FluidGridDynamicController.java')}
${showcase:getFileContent('/org/primefaces/extensions/showcase/model/fluidgrid/Image.java')}