aforemny/material-components-web-elm/6.0.0

NOTE: the latest version is 9.1.0

Rerouted (regenerated, verified). Same repository and tag, but GitHub now builds the zip with different bytes, so it no longer matches the SHA-1 package.elm-lang.org recorded. The Lamdera package server serves a copy recovered from https://github.com/aforemny/material-components-web-elm.

What we checked: Tag 6.0.0 is still on github.com/aforemny/material-components-web-elm; its commit fa5f16f0eddc is from 2020-10-08 13:01 UTC, before the version was published (2020-10-08 13:03 UTC); every file Elm uses matches a copy in a Lamdera package cache from 2021-02-13, from before the change; elm.json is byte-identical to package.elm-lang.org's; the exposed modules match docs.json; the zip's SHA-1 is not the published one (GitHub's zip no longer comes out byte for byte the same), so the contents were checked instead.

The Lamdera compiler uses this copy and prints a one-line notice saying so. elm itself fails to download this version.

Details · package.elm-lang.org's zip: https://github.com/aforemny/material-components-web-elm/zipball/6.0.0/

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

Default configuration of an image list

Configuration Options

setMasonry : 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 : 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 (Attribute msg) -> Config msg -> Config msg

Specify additional attributes

Image List

imageList : Config msg -> List (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"
    ]