@smui/image-list

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

Whoa There, These Docs are Outdated

The latest SMUI v3 beta 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 './style.scss';
  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);
  }
}

Demo

in action: https://sveltematerialui.com/demo/image-list

demo code: https://github.com/hperrin/svelte-material-ui/blob/master/site/src/routes/demo/image-list/

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.

Changelog

3.0.0-beta.1 (2021-04-11)

Bug Fixes

• allow keyboard navigation to tabs when none are active (13c1812)
• svgs in icon buttons were focusable (f9d2678)