sp-asset

NPM

1.0.3

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API Changelog

Attributes and Properties #

Property Attribute Type Default Description label label string '' variant variant 'file' | 'folder' | undefined

Slots #

Name Description default slot content to be displayed in the asset when an acceptable value for `file` is not present

1.0.1 (2024-11-11) #

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

1.0.0 (2024-10-31) #

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

0.49.0 (2024-10-15) #

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

0.48.1 (2024-10-01) #

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

0.48.0 (2024-09-17) #

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

0.47.2 (2024-09-03) #

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

0.47.1 (2024-08-27) #

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

0.47.0 (2024-08-20) #

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

0.46.0 (2024-08-08) #

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

0.45.0 (2024-07-30) #

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

0.44.0 (2024-07-15) #

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

0.43.0 (2024-06-11) #

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

0.42.5 (2024-05-24) #

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

0.42.4 (2024-05-14) #

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

0.42.3 (2024-05-01) #

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

0.42.2 (2024-04-03) #

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

0.42.1 (2024-04-02) #

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

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/asset

0.41.1 (2024-02-22) #

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

0.41.0 (2024-02-13) #

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

0.40.5 (2024-02-05) #

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

0.40.4 (2024-01-29) #

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

0.40.3 (2024-01-11) #

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

0.40.2 (2023-12-18) #

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

0.40.1 (2023-12-05) #

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

0.40.0 (2023-11-16) #

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

0.39.4 (2023-11-02) #

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

0.39.3 (2023-10-18) #

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

0.39.2 (2023-10-13) #

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

0.39.1 (2023-10-06) #

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

0.39.0 (2023-09-25) #

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

0.38.0 (2023-09-05) #

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

0.37.0 (2023-08-18) #

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

0.36.0 (2023-08-18) #

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

0.35.0 (2023-07-31) #

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

0.34.0 (2023-07-11) #

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

0.33.2 (2023-06-14) #

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

0.33.0 (2023-06-08) #

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

0.32.0 (2023-06-01) #

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

0.31.0 (2023-05-17) #

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

0.30.0 (2023-05-03) #

Bug Fixes #

  • asset: include alternative text for the file/folder versions (92a091c)
  • asset: surface label attribute for folder/file "assets" (861696b)
  • ensure browser understandable extensions (f4e59f7)
  • include default export in the "exports" fields (f32407d)
  • include the "types" entry in package.json files (b432f59)
  • update file path access (8898bf7)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • update side effect listings (8160d3a)
  • update to latest spectrum-css packages (a5ca19f)
  • use latest @spectrum-css/* versions (c35eb86)

Features #

  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • asset: add the asset pattern (a7c00bb)
  • asset: update spectrum css input (b3f0d70)
  • include all Dev Mode files in side effects (f70817c)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • use latest exports specification (a7ecf4b)

0.7.9 (2023-04-24) #

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

0.7.8 (2023-04-05) #

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

0.7.7 (2023-03-22) #

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

0.7.6 (2023-02-08) #

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

0.7.5 (2023-01-23) #

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

0.7.4 (2023-01-09) #

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

0.7.3 (2022-12-08) #

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

0.7.2 (2022-11-21) #

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

0.7.1 (2022-11-14) #

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

0.7.0 (2022-08-09) #

Features #

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

0.6.11 (2022-08-04) #

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

0.6.10 (2022-07-18) #

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

0.6.9 (2022-06-29) #

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

0.6.8 (2022-06-07) #

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

0.6.7 (2022-05-12) #

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

0.6.6 (2022-04-21) #

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

0.6.5 (2022-03-08) #

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

0.6.4 (2022-03-04) #

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

0.6.3 (2022-02-22) #

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

0.6.2 (2022-01-26) #

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

0.6.1 (2021-12-13) #

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

0.6.0 (2021-11-08) #

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

0.5.1 (2021-11-08) #

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

0.5.0 (2021-11-02) #

Features #

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.4.9 (2021-09-20) #

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

0.4.8 (2021-08-24) #

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

0.4.7 (2021-07-22) #

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

0.4.6 (2021-06-16) #

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

0.4.5 (2021-05-12) #

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

0.4.4 (2021-04-09) #

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

0.4.3 (2021-03-29) #

Bug Fixes #

  • asset: surface label attribute for folder/file "assets" (861696b)

0.4.2 (2021-03-22) #

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

0.4.1 (2021-03-05) #

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

0.4.0 (2021-03-04) #

Features #

  • use latest exports specification (a7ecf4b)

0.3.1 (2021-02-11) #

Bug Fixes #

  • update to latest spectrum-css packages (a5ca19f)

0.3.0 (2021-01-21) #

Bug Fixes #

  • update file path access (8898bf7)
  • asset: include alternative text for the file/folder versions (92a091c)
  • include the "types" entry in package.json files (b432f59)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • use latest @spectrum-css/* versions (c35eb86)

Features #

  • asset: update spectrum css input (b3f0d70)

0.2.0 (2021-01-13) #

Bug Fixes #

  • update file path access (8898bf7)
  • asset: include alternative text for the file/folder versions (92a091c)
  • include the "types" entry in package.json files (b432f59)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • use latest @spectrum-css/* versions (c35eb86)

Features #

  • asset: update spectrum css input (b3f0d70)

0.1.5 (2020-10-12) #

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

0.1.4 (2020-10-12) #

Bug Fixes #

  • include default export in the "exports" fields (f32407d)

0.1.3 (2020-09-25) #

Bug Fixes #

  • update side effect listings (8160d3a)

0.1.2 (2020-08-31) #

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

0.1.1 (2020-08-19) #

Bug Fixes #

  • ensure browser understandable extensions (f4e59f7)

0.1.0 (2020-07-22) #

Features #

  • asset: add the asset pattern (a7c00bb)

Description #

Use an <sp-asset> element to visually represent a file, folder or image in your application. File and folder representations will center themselves horizontally and vertically in the space provided to the element. Images will be contained to the element, growing to the element's full height while centering itself within the width provided.

Installation #

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

yarn add @spectrum-web-components/asset

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

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

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

import { Asset } from '@spectrum-web-components/asset';

Example #

<sp-asset style="height: 128px">
    <img src="https://picsum.photos/500/500" alt="Demo Image" />
</sp-asset>

File #

<div class="flex">
    <sp-asset variant="file"></sp-asset>
    <sp-asset variant="file" label="Named File Asset"></sp-asset>
</div>

Folder #

<div class="flex">
    <sp-asset variant="folder"></sp-asset>
    <sp-asset variant="folder" label="Named Folder Asset"></sp-asset>
</div>