sp-asset

NPM 1.0.1

View Storybook

Try it on webcomponents.dev
Overview API Changelog

Overview

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';

Anatomy

An asset has a single default slot. Use this slot for an image asset.

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

Options

Variant

Use variant="file"for a representation of a file or variant="folder" a representation of a folder.

<div class="flex">
    <sp-asset variant="file"></sp-asset>
    <sp-asset variant="folder"></sp-asset>
</div>

Accessibility

Use alt text for slotted images

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

Use the label property to provide a descriptive label for variants

You can use the label property to provide a descriptive label. If a label is not provided, assets with variant="file" will be labelled "File" assets with and variant="folder" will be labelled with "Folder".

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

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)