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

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

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
            (ImageList.itemConfig
                |> ImageList.setAttributes
                    [ style "width" "calc(100% / 5 - 4px)"
                    , style "margin" "2px"
                    ]
            )
            "images/photos/3x2/1.jpg"
        ]

Configuration


type alias Config msg =
Internal.Config msg

Configuration of an image list item

config : Config msg

Default configuration of an image list item

Configuration Options

setLabel : Maybe String -> Config msg -> Config msg

Specify an image list item's label

setHref : Maybe String -> Config msg -> Config msg

Specify whether an image list item is supposed to be a link image list item

A link image list items behaves essentially like a HTML5 anchor element.

setImageNode : Maybe (List (Html.Attribute msg)) -> Config msg -> Config msg

Specify whether an image list item should render a Html.img element instead of a background image.

You may pass additional attributes to the Html.img element.

Note that in order to retain expected behavior, you may want to specify the CSS rule object-fit: cover.

setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg

Specify additional attributes

Image list Item


type alias ImageListItem msg =
Internal.ImageListItem msg

Image list item type

Image list items can only be rendered within a image list container

imageListItem : Config msg -> String -> ImageListItem msg

Image list item constructor

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
        (ImageList.itemConfig
            |> ImageList.setImageNode (Just [
              Html.Attribute.style "object-fit" "cover"
              ])
        )
        "images/photos/3x2/1.jpg"