An Image List consists of several items, each containing an image and optionally supporting a text label.
This modules concerns the container image list. If you are looking for information about the image list items, refer to Material.ImageList.Item.
Note that you will have to set the width and margin of image list items yourself, preferably through SASS or through inline CSS.
import Html.Attributes exposing (style)
import Material.ImageList as ImageList
import Material.ImageList.Item as ImageListItem
main =
ImageList.imageList ImageList.config
[ ImageListItem.imageListItem
(ImageListItem.config
|> ImageListItem.setAttributes
[ style "width" "calc(100% / 5 - 4px)"
, style "margin" "2px"
]
)
"images/photos/3x2/1.jpg"
]
Configuration of an image list
config : Config msg
Default configuration of an image list
setMasonry : Basics.Bool -> Config msg -> Config msg
Specify whether an image list is a masonry image list
The masonry image list variant presents images vertically arranged into several columns. In this layout, images may be any combination of aspect ratios.
setWithTextProtection : Basics.Bool -> Config msg -> Config msg
Specify whether an image list item's label should display in a scrim on top of the image
By default, image list item's labels display below the image.
setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg
Specify additional attributes
imageList : Config msg -> List (Item.ImageListItem msg) -> Html msg
Image list view function
The masonry image list variant presents images vertically arranged into several columns. In this layout, images may be any combination of aspect ratios.
ImageList.imageList
(ImageList.config |> ImageList.setMasonry True)
[]
Image's labels are by default positioned below the image. If you want image
labels to be positioned in a scrim overlaying each image, use the image list's
setWithTextProtection
configuration option.
ImageList.imageList
(ImageList.config
|> ImageList.setWithTextProtection True
)
[ ImageListItem.imageListItem
(ImageListItem.config
|> ImageListItem.setLabel (Just "Photo")
)
"images/photos/3x2/1.jpg"
]