• ImageList
  • masonry true/false

    Makes the image list masonry.
  • with-text-protection true/false

    Indicates that supporting content should be positioned in a scrim overlaying each image.
• Item
  • no specific props
• AspectContainer
  • no specific props
• Image
  • no specific props
• Supporting
  • no specific props
• Label
  • no specific props

import {h, Component} from 'preact';
import ImageList from '../../../../ImageList';
import 'preact-material-components/ImageList/style.css';

export default class ImageListPage extends Component {
  render(){
    return (
      <div>
        <ImageList mdc-image-list--with-text-protection>
          <ImageList.Item>
            <ImageList.AspectContainer>
              <ImageList.Image src='https://material-components-web.appspot.com/images/photos/3x2/1.jpg'/>
              <ImageList.Supporting>
                <ImageList.Label>Text Label</ImageList.Label>
              </ImageList.Supporting>
            </ImageList.AspectContainer>
          </ImageList.Item>
          <ImageList.Item>
            <ImageList.AspectContainer>
              <ImageList.Image src='https://material-components-web.appspot.com/images/photos/3x2/6.jpg'/>
              <ImageList.Supporting>
                <ImageList.Label>Text Label</ImageList.Label>
              </ImageList.Supporting>
            </ImageList.AspectContainer>
          </ImageList.Item>
          <ImageList.Item>
            <ImageList.AspectContainer>
              <ImageList.Image src='https://material-components-web.appspot.com/images/photos/3x2/2.jpg'/>
              <ImageList.Supporting>
                <ImageList.Label>Text Label</ImageList.Label>
              </ImageList.Supporting>
            </ImageList.AspectContainer>
          </ImageList.Item>
          <ImageList.Item>
            <ImageList.AspectContainer>
              <ImageList.Image src='https://material-components-web.appspot.com/images/photos/3x2/3.jpg'/>
              <ImageList.Supporting>
                <ImageList.Label>Text Label</ImageList.Label>
              </ImageList.Supporting>
            </ImageList.AspectContainer>
          </ImageList.Item>
          <ImageList.Item>
            <ImageList.AspectContainer>
              <ImageList.Image src='https://material-components-web.appspot.com/images/photos/3x2/4.jpg'/>
              <ImageList.Supporting>
                <ImageList.Label>Text Label</ImageList.Label>
              </ImageList.Supporting>
            </ImageList.AspectContainer>
          </ImageList.Item>
          <ImageList.Item>
            <ImageList.AspectContainer>
              <ImageList.Image src='https://material-components-web.appspot.com/images/photos/3x2/5.jpg'/>
              <ImageList.Supporting>
                <ImageList.Label>Text Label</ImageList.Label>
              </ImageList.Supporting>
            </ImageList.AspectContainer>
          </ImageList.Item>
        </ImageList>
      </div>
    );
  }
}