sp-thumbnail

NPM

1.0.3

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API Changelog

Attributes and Properties #

Property Attribute Type Default Description background background string | undefined cover cover boolean false layer layer boolean false size size ThumbnailSize

Slots #

Name Description image image element to present in the Thumbnail

1.0.1 (2024-11-11) #

Note: Version bump only for package @spectrum-web-components/thumbnail

1.0.0 (2024-10-31) #

BREAKING CHANGES #

  • remove thumbnail deprecated sizes (#4760)

0.49.0 (2024-10-15) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.48.1 (2024-10-01) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.48.0 (2024-09-17) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.47.2 (2024-09-03) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.47.1 (2024-08-27) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.47.0 (2024-08-20) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.46.0 (2024-08-08) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.45.0 (2024-07-30) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.44.0 (2024-07-15) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.43.0 (2024-06-11) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.42.5 (2024-05-24) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.42.4 (2024-05-14) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.42.3 (2024-05-01) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.42.2 (2024-04-03) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.42.1 (2024-04-02) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.42.0 (2024-03-19) #

Features #

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.41.1 (2024-02-22) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.41.0 (2024-02-13) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.40.5 (2024-02-05) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.40.4 (2024-01-29) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.40.3 (2024-01-11) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.40.2 (2023-12-18) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.40.1 (2023-12-05) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.40.0 (2023-11-16) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.39.4 (2023-11-02) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.39.3 (2023-10-18) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.39.2 (2023-10-13) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.39.1 (2023-10-06) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.39.0 (2023-09-25) #

Bug Fixes #

  • color-handle,color-loupe,swatch,thumbnail: use the Opacity Checkerboard package (47e1fc4)

0.38.0 (2023-09-05) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.37.0 (2023-08-18) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.36.0 (2023-08-18) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.35.0 (2023-07-31) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.34.0 (2023-07-11) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.33.2 (2023-06-14) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.33.0 (2023-06-08) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.32.0 (2023-06-01) #

Features #

  • thumbnail: use core tokens (e298035)

0.31.0 (2023-05-17) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.30.0 (2023-05-03) #

Bug Fixes #

  • add t-shirt sizing to Thumbnail and support for "xxs"/"xs" sizes (520a642)
  • use latest @spectrum-css/thumbnail with built in "cover" support (d152b4e)

Features #

  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • include all Dev Mode files in side effects (f70817c)
  • leverage latest Spectrum button API (9faeade)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • tabs: add sp-tab-panel element (b17d276)
  • thumbnail: add the thumbnail package (56935d5)

0.6.9 (2023-04-24) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.6.8 (2023-04-05) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.6.7 (2023-03-22) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.6.6 (2023-02-08) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.6.5 (2023-01-23) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.6.4 (2023-01-09) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.6.3 (2022-12-08) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.6.2 (2022-11-21) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.6.1 (2022-11-14) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.6.0 (2022-08-09) #

Features #

  • include all Dev Mode files in side effects (f70817c)

0.5.7 (2022-08-04) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.5.6 (2022-07-18) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.5.5 (2022-06-29) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.5.4 (2022-06-07) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.5.3 (2022-05-12) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.5.2 (2022-04-21) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.5.1 (2022-03-08) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.5.0 (2022-03-04) #

Features #

  • leverage latest Spectrum button API (9faeade)

0.4.4 (2022-02-22) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.4.3 (2022-01-26) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.4.2 (2022-01-07) #

Bug Fixes #

  • use latest @spectrum-css/thumbnail with built in "cover" support (d152b4e)

0.4.1 (2021-12-13) #

Bug Fixes #

  • add t-shirt sizing to Thumbnail and support for "xxs"/"xs" sizes (520a642)

0.4.0 (2021-11-08) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.3.1 (2021-11-08) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.3.0 (2021-11-02) #

Features #

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.2.5 (2021-10-12) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.2.4 (2021-09-20) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.2.3 (2021-08-24) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.2.2 (2021-07-22) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.2.1 (2021-06-16) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.2.0 (2021-06-07) #

Features #

  • tabs: add sp-tab-panel element (b17d276)

0.1.5 (2021-05-12) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.1.4 (2021-04-09) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.1.3 (2021-03-29) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.1.2 (2021-03-22) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.1.1 (2021-03-05) #

Note: Version bump only for package @spectrum-web-components/thumbnail

0.1.0 (2021-03-04) #

Features #

  • thumbnail: add the thumbnail package (56935d5)

Description #

An sp-thumbnail can be used in a variety of locations as a way to display a preview of an image, layer, or effect. sp-thumbnail elements are not keyboard-focusable since they're intended to be used inside of a component that a user sets focus to (such as select lists or tree items).

Usage #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

yarn add @spectrum-web-components/thumbnail

Import the side effectful registration of <sp-thumbnail> via:

import '@spectrum-web-components/thumbnail/sp-thumbnail.js';

When looking to leverage the Thumbnail base class as a type and/or for extension purposes, do so via:

import { Thumbnail } from '@spectrum-web-components/thumbnail';

Sizes #

50 
<sp-thumbnail size="50">
    <img src="https://picsum.photos/100/100" alt="Demo Image" />
</sp-thumbnail>
 75 
<sp-thumbnail size="75">
    <img src="https://picsum.photos/100/100" alt="Demo Image" />
</sp-thumbnail>
 100 
<sp-thumbnail size="100">
    <img src="https://picsum.photos/100/100" alt="Demo Image" />
</sp-thumbnail>
 200 
<sp-thumbnail size="200">
    <img src="https://picsum.photos/100/100" alt="Demo Image" />
</sp-thumbnail>
 300 
<sp-thumbnail size="300">
    <img src="https://picsum.photos/100/100" alt="Demo Image" />
</sp-thumbnail>
 400 
<sp-thumbnail size="400">
    <img src="https://picsum.photos/100/100" alt="Demo Image" />
</sp-thumbnail>
 500 
<sp-thumbnail size="500">
    <img src="https://picsum.photos/100/100" alt="Demo Image" />
</sp-thumbnail>
 600 
<sp-thumbnail size="600">
    <img src="https://picsum.photos/100/100" alt="Demo Image" />
</sp-thumbnail>
 700 
<sp-thumbnail size="700">
    <img src="https://picsum.photos/100/100" alt="Demo Image" />
</sp-thumbnail>
 800 
<sp-thumbnail size="800">
    <img src="https://picsum.photos/100/100" alt="Demo Image" />
</sp-thumbnail>
 900 
<sp-thumbnail size="900">
    <img src="https://picsum.photos/100/100" alt="Demo Image" />
</sp-thumbnail>
 1000 
<sp-thumbnail size="1000">
    <img src="https://picsum.photos/100/100" alt="Demo Image" />
</sp-thumbnail>

Focused #

When focused the sp-thumbnail element will be displayed as follows:

<sp-thumbnail focused>
    <img src="https://picsum.photos/100/100" alt="Demo Image" />
</sp-thumbnail>

Disabled #

Thumbnail should only be displayed as disabled if the entire componet is also disabled. When disabled the sp-thumbnail element will be displayed as follows:

<sp-thumbnail disabled>
    <img src="https://picsum.photos/100/100" alt="Demo Image" />
</sp-thumbnail>

Representing non-square content #

By default, an sp-thumbnail will ensure that the entirety of the content that it respresents is visible by letterboxing that content with a checkerboard background when its aspect ratio is not square.

<div style="display: flex; gap: var(--spectrum-spacing-100);">
    <sp-thumbnail>
        <img src="https://picsum.photos/300/400" alt="Demo Image" />
    </sp-thumbnail>

    <sp-thumbnail>
        <img src="https://picsum.photos/500/100" alt="Demo Image" />
    </sp-thumbnail>
</div>

The background attribute takes a string value of the CSS "background" property in order to customize the letterboxing.

<div style="display: flex; gap: var(--spectrum-spacing-100);">
    <sp-thumbnail background="red">
        <img src="https://picsum.photos/300/400" alt="Demo Image" />
    </sp-thumbnail>

    <sp-thumbnail background="#00ff00">
        <img src="https://picsum.photos/500/100" alt="Demo Image" />
    </sp-thumbnail>
</div>

The cover attribute will cause the content to fill the space provided by the sp-thumbnail element:

<div style="display: flex; gap: var(--spectrum-spacing-100);">
    <sp-thumbnail cover>
        <img src="https://picsum.photos/300/400" alt="Demo Image" />
    </sp-thumbnail>

    <sp-thumbnail cover>
        <img src="https://picsum.photos/500/100" alt="Demo Image" />
    </sp-thumbnail>
</div>

Layer and Layer Selected #

For when sp-thumbail is used in layer management (such as the Compact or Detail Layers panels). The thumbnail is given a thick blue border to indicate its selection when used in layer management.

<div style="display: flex; gap: var(--spectrum-spacing-100);">
    <sp-thumbnail layer>
        <img src="https://picsum.photos/400/400" alt="Demo Image" />
    </sp-thumbnail>

    <sp-thumbnail layer selected>
        <img src="https://picsum.photos/500/100" alt="Demo Image" />
    </sp-thumbnail>
</div>