MasonryView
Last updated
Last updated
Component: A collections of Graphics (Images) of varying heights, that are vertically stacked in a Scrollview.
Parent: Module, Screen
Child: Graphic, Section Header
1:1 (Square)
2:3
4:3
9:12
9:16
Double - Two graphics positioned side-by-side in a portrait view on the device.
Triple - Three graphics positioned side-by-side in portrait mode. Note, that the masonry view can change from a double to a triple column format based on screen width and breakpoints (ie. PhonePortrait:Double, PhoneLandscape:Triple, TabletPortrait:Triple, TabletLandscape:Quad)
The view either has a header or not within the scrollable view. Note this is different from a header that is outside of the scrollable area.
The gutters around the content can be on or off depending on the use case.
The Graphics (Images) within the masonry grid have a variety of different "set sizes". All options have the focal point at the horizontal and vertical center of the graphic (which means part of the image may be masked, depending on the source image size). The size of the images dynamically change IN PROPORTION based on the width of a portrait format screen. NOTE: The screens are designed with a 360 dp wide screen, so when on an iPhone the screen is 375 dp. The gutters between the images remains constant and the images shrink/grow to fill the space in proportion.
The background of the view can be light or dark depending on the use case. Most often when browsing photos on your device you're displaying these in the dark style, but if you're looking at say, Instagram photos in a collection, those would be displayed in a light style.
