Image Grid

A list container for displaying images or list items (list groups). 

Behaviours & States

Behaviour

Layout

Image grid is a list container that displays images in a consistent grid layout. 

 

The layout and size of a Image Grid is defined by the size of the Grid Items within and the size of the area containing the Grid. The Grid size is not defined by rows or columns. If the area containing the Grid changes in size, items will be reorganized to fit within the new area. Example:  a 400x400 pixel image grid with 90x90 pixel list items would display four rows and four columns.

 

Grids can support one of three modes:

  • Fixed Size - all items have the same, fixed size which may be configured by setting the width and height properties of the item.
  • Fluid Width - all items have the same size, but may stretch or shrink to fill the size of the Grid. A minimum width property may be set on the item to ensure the image does not shrink below a specified size.
  • Normalize Rows - height and width of the items are not known. While the application is running, it is possible to get the dimensions of each item via the "sizeupItem" event. 

Navigation

As focus moves through the Grid via 5-way navigation, Grid Items remain stationary until the last fully visible Grid Item is in focus. For off screen content, once the user navigates past this Grid Item, the Grid shifts to accommodate the next row or column. For multiple offscreen Grid Items, this process is repeated until the end/beginning is reached. Rows and columns are not to shift independently; instead the whole grid must shift.

 

Alternatively, users can use Scroll Bars for navigation when a Grid goes beyond the screen. Scroll Bars are only visible when a Grid Item is in focus.

States

Grids do not have states Grid Items can be either in the normal or focus state.

Illustration

IMAGE_GRID.png

Navigation