Material.ImageList

An Image List consists of several items, each containing an image and optionally supporting a text label.

Resources
Basic Usage
Image List
Image List Item
Masonry Image List
Image List with Text Label

Resources

Basic Usage

Note that you will have to set the width and margin of image list items yourself, preferably through SASS.

import Html.Attributes exposing (style)
import Material.ImageList
    exposing
        ( imageList
        , imageListConfig
        , imageListItem
        , imageListItemConfig
        )


main =
    imageList imageListConfig
        [ imageListItem
            { imageListItemConfig
                | additionalAttributes =
                    [ style "width"
                        "calc(100% / 5 - 4.2px)"
                    , style "margin" "2px"
                    ]
            }
            "images/photos/3x2/1.jpg"
        ]

Image List

imageList : ImageListConfig msg -> List (ImageListItem msg) -> Html msg

Image list view function

imageListConfig : ImageListConfig msg

Default configuration of an image list

type alias ImageListConfig msg =

{ masonry : Bool

, withTextProtection : Bool

, additionalAttributes : List (Attribute msg)

}

Configuration of an image list

Image list Item

imageListItem : ImageListItemConfig msg -> String -> ImageListItem msg

Image list item constructor

imageListItemConfig : ImageListItemConfig msg

Default configuration of an image list item

type alias ImageListItemConfig msg =

{ label : Maybe String

, href : Maybe String

, additionalAttributes : List (Attribute msg)

}

Configuration of an image list item

type ImageListItem msg

Image list item

Masonry Image List

The Masonry Image List variant presents images vertically arranged into several columns, using CSS Columns. In this layout, images may be any combination of aspect ratios.

    imageList { imageListConfig | masonry = True } []

Image List with Label

Image's labels are by default positioned below the image. If you want image labels to be positioned in a scrim overlaying each image, set the image list's textProtection configuration field to True.

    imageList { imageListConfig | textProtection = True }
        [ imageListItem
            { imageListItemConfig | label = "Photo" }
            "images/photos/3x2/1.jpg"
        ]

aforemny/material-components-web-elm/2.1.1