menu
Dark Mode
backgroundLayer 1
preact-material-components
Components and their props
  • 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
Sample code
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>
    );
  }
}
Original documentation
This component encapsulates mdc-image-list, you can refer to its documentation here.
Demo
Normal
  • Text Label
  • Text Label
  • Text Label
  • Text Label
  • Text Label
  • Text Label
  • Text Label
  • Text Label
  • Text Label
  • Text Label
  • Text Label
  • Text Label
  • Text Label
  • Text Label
  • Text Label