sp-thumbnail

Overview API Changelog

Description

Section titled 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

Section titled 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

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

Focused

Section titled 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

Section titled 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

Section titled 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

Section titled 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>