README.md

Svelte Material UI - Image List

Image lists are RTL aware containers for sets of images and optional content.

Installation

npm install --save-dev @smui/image-list

Demo

See it in action.

See the demo code.

Whoa There, These Docs are Outdated

The latest SMUI v3 had a lot of changes, and these docs haven't been caught up yet. You should check out the demo page's code to see the latest usage.

Basic Usage

<ImageList class="my-image-list">
  {#each $images as image}
    <Item>
      <ImageAspectContainer>
        <Image src={image.src} alt={image.title} />
      </ImageAspectContainer>
      <Supporting>
        <Label>{image.description}</Label>
      </Supporting>
    </Item>
  {/each}
</ImageList>

<script>
  import ImageList, {
    Item,
    ImageAspectContainer,
    Image,
    Supporting,
    Label,
  } from '@smui/image-list';
  import { images } from './store.js';
</script>

// style.scss
.my-image-list {
  @include mdc-image-list-standard-columns(5);
  max-width: 680px;
}

@media (max-width: 599px) {
  .my-image-list {
    @include mdc-image-list-standard-columns(3);
  }
}

Exports

todo...

More Information

See Image lists in the Material design spec.

See Image List in MDC-Web for information about the upstream library's architecture.