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

This modules concerns the image list item. If you are looking for information about the image list contianer, refer to Material.ImageList.

Table of Contents

• Resources
• Configuration
  • Configuration Options
• Basic Usage
• Image List Item
• Image List Item with Html.img

Resources

• Demo: Image Lists
• Material Design Guidelines: Image list
• MDC Web: Image List
• Sass Mixins (MDC Web)

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

Configuration Options

Image list Item

Image list Item with Html.img

By default, image list items display the given image as a background image. If you prefer to display the image using a Html.img element, set the configuration option setImageNode. You may specify additional attributes that go on the Html.img element, such as srcset or sizes.

Note that in order to retain default behavior, you should specify the CSS rule object-fit: cover.

ImageListItem.imageListItem
    (ImageListItem.config
        |> ImageListItem.setImageNode
            (Just
                [ Html.Attributes.style "object-fit" "cover"
                ]
            )
    )
    "images/photos/3x2/1.jpg"