@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

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.

Changelog

4.1.0 (2021-04-28)

Bug Fixes

• remove duplicate change and input event forwarding (641acf1), closes #233
• required causes textfield to use native validation, label stops floating when value deleted (b13b2a0), closes #234
• slider external updates not reflected in UI (d46b854)
• textfield labels and notches show incorrect state and position (c935423), closes #236
• theme builder error when the output directory doesn't exist (36c2531)
• warnings about unexpected slot in Img and Hr (98a555f)

Features

• change event modifier syntax to allow use on all events (1fe4f82)
• include props for conditional icons on Textfield and Select (2d95dc7), closes #230

Reverts

• Revert "v4.1.0" (54dfd48)
• Revert "v4.1.0" (3e683d9)