Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

@spectrum-web-components/thumbnail

Package Overview
Dependencies
1
Maintainers
7
Versions
82
Issues
File Explorer

Advanced tools

@spectrum-web-components/thumbnail

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

    0.6.7latest
    Github

Version published
Maintainers
7
Weekly downloads
366
decreased by-44.88%

Weekly downloads

Readme

Source

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

Extra Extra Small <sp-thumbnail size="xxs"> <img src="https://place.dog/100/100" alt="Demo Image" /> </sp-thumbnail> Extra Small <sp-thumbnail size="xs"> <img src="https://place.dog/100/100" alt="Demo Image" /> </sp-thumbnail> Small <sp-thumbnail size="s"> <img src="https://place.dog/100/100" alt="Demo Image" /> </sp-thumbnail> Medium <sp-thumbnail size="m"> <img src="https://place.dog/100/100" alt="Demo Image" /> </sp-thumbnail> Large <sp-thumbnail size="l"> <img src="https://place.dog/100/100" alt="Demo Image" /> </sp-thumbnail>

Focused or selected

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

<div style="display: flex; gap: var(--spectrum-global-dimension-size-100);"> <sp-thumbnail focused> <img src="https://place.dog/100/100" alt="Demo Image" /> </sp-thumbnail> <sp-thumbnail selected> <img src="https://place.dog/100/100" alt="Demo Image" /> </sp-thumbnail> </div>

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-global-dimension-size-100);"> <sp-thumbnail> <img src="https://place.dog/300/400" alt="Eiffel Tower at night" /> </sp-thumbnail> <sp-thumbnail> <img src="https://place.dog/500/100" alt="Landscape with mountains and lake" /> </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-global-dimension-size-100);"> <sp-thumbnail background="red"> <img src="https://place.dog/300/400" alt="Eiffel Tower at night" /> </sp-thumbnail> <sp-thumbnail background="#00ff00"> <img src="https://place.dog/500/100" alt="Landscape with mountains and lake" /> </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-global-dimension-size-100);"> <sp-thumbnail cover> <img src="https://place.dog/300/400" alt="Eiffel Tower at night" /> </sp-thumbnail> <sp-thumbnail cover> <img src="https://place.dog/500/100" alt="Landscape with mountains and lake" /> </sp-thumbnail> </div>

Keywords

FAQs

Last updated on 22 Mar 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc