MDC Pug3.0.0-beta.3
codeforumbug_report

Standard image list

codecode_off
- const BASE_URL = 'https://material-components.github.io/material-components-web-catalog/static/media/photos'
 
+mdc-image-list.standard-image-list
    for n in Array(15).fill(1).map((value, index) => value + index)
        +mdc-image-list__item(
            image=`${BASE_URL}/3x2/${n}.jpg`
        )

Standard image list with text protection

codecode_off
  • 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
- const BASE_URL = 'https://material-components.github.io/material-components-web-catalog/static/media/photos'
 
+mdc-image-list.standard-image-list()(withTextProtection)
    for n in Array(15).fill(1).map((value, index) => value + index)
        +mdc-image-list__item(
            image=`${BASE_URL}/3x2/${n}.jpg`
            label='Text Label'
        )

Masonry image list

codecode_off
- const BASE_URL = 'https://material-components.github.io/material-components-web-catalog/static/media/photos'
 
+mdc-image-list.masonry-image-list()(masonry)
    +mdc-image-list__item(`${BASE_URL}/3x2/16.jpg`)
    +mdc-image-list__item(`${BASE_URL}/2x3/1.jpg`)
    +mdc-image-list__item(`${BASE_URL}/3x2/1.jpg`)
    +mdc-image-list__item(`${BASE_URL}/2x3/2.jpg`)
    +mdc-image-list__item(`${BASE_URL}/2x3/3.jpg`)
    +mdc-image-list__item(`${BASE_URL}/3x2/2.jpg`)
    +mdc-image-list__item(`${BASE_URL}/2x3/4.jpg`)
    +mdc-image-list__item(`${BASE_URL}/3x2/3.jpg`)
    +mdc-image-list__item(`${BASE_URL}/2x3/5.jpg`)
    +mdc-image-list__item(`${BASE_URL}/3x2/4.jpg`)
    +mdc-image-list__item(`${BASE_URL}/2x3/6.jpg`)
    +mdc-image-list__item(`${BASE_URL}/3x2/5.jpg`)
    +mdc-image-list__item(`${BASE_URL}/2x3/7.jpg`)
    +mdc-image-list__item(`${BASE_URL}/3x2/6.jpg`)
    +mdc-image-list__item(`${BASE_URL}/3x2/7.jpg`)