sp-asset

Examples API

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

CSS Custom Properties #

Name Default
--spectrum-asset-file-background-color var(--spectrum-global-color-gray-50)
--spectrum-asset-folder-background-color var(--spectrum-global-color-gray-300)
--spectrum-asset-icon-margin var(--spectrum-global-dimension-size-250)
--spectrum-asset-icon-max-width var(--spectrum-global-dimension-static-size-1000)
--spectrum-asset-icon-min-width var(--spectrum-global-dimension-size-600)
--spectrum-asset-icon-outline-color var(--spectrum-global-color-gray-500)

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://place.dog/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>