aforemny / material-components-web-elm / Material.ImageList

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.

Table of Contents

Resources

Basic Usage

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


type Config msg

Configuration of an image list

config : Config msg

Default configuration of an image list

Configuration Options

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

Image List

imageList : Config msg -> List (Item.ImageListItem msg) -> Html msg

Image list view function

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.

ImageList.imageList
    (ImageList.config |> ImageList.setMasonry 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, 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"
    ]