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.
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"
]
Internal.Config msg
Configuration of an image list item
config : Config msg
Default configuration of an image list item
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
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
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"