action-menu: stack a "label-only" slot on top of the others to allow no icon menu buttons (6b5817d)
alert-dialog: add Alert Dialog package (#3501) (1062847)
base: add re-export of lit/directive.js (#3616) (d2e237f)
base: introduce static version property for component class (#3582) (e7e2b76)
color-handle,color-loupe,swatch,thumbnail: use the Opacity Checkerboard package (47e1fc4)
menu: allow Menu elements to be controlled (74ed7fb)
menu: manage deeply slotted menu items and initial focus (7f9ad69)
opacity checkerboard inclusion order (#3651) (4f417dc)
overlay: allow "receives-focus" to target the root of an overlay (#3658) (0db1025)
overlay: ensure position when closing overlays over the top-layer (55fab0d)
overlay: reduce circular dependencies (25eeb71)
picker,split-button: include "tooltip" slot in the main button (699b8af)
shared: scope querySelector to direct children, like slots are (515eaee)
slider: add t-shirt sizing (24dac78)

Features

color-slider: migrate to core tokens (#3507) (96d0d40)
meter: add "variant" (coalescing various boolean attributes) and remove "over-background" attributes (#3514) (40e5f8a)
table: migrate to core tokens (#3441) (b866bab)
underlay: use core tokens (9c555ab)

Readme

Source

Description

An <sp-avatar> is a great way to feature a visual representation of a user.

Usage

yarn add @spectrum-web-components/avatar

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

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

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

import { Avatar } from '@spectrum-web-components/avatar';

Sizes

<sp-avatar
    size="50"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>

<sp-avatar
    size="75"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>

100

<sp-avatar
    size="100"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>

200

<sp-avatar
    size="200"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>

300

<sp-avatar
    size="300"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>

400

<sp-avatar
    size="400"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>

500

<sp-avatar
    size="500"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>

600

<sp-avatar
    size="600"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>

700

<sp-avatar
    size="700"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>

Accessibility

The label attribute of the <sp-avatar> will be passed into the <img> element as the alt tag for use in defining a textual representation of the image displayed.

Keywords

FAQs

What is @spectrum-web-components/avatar?

Is @spectrum-web-components/avatar well maintained?

Last updated on 25 Sep 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install