@spectrum-web-components/avatar NPM | npm.io

1.0.0 • Published 8 months ago

Install

Weekly downloads

100

License

Apache-2.0

Repository

Last release

8 months ago

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>

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

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

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

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

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

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

<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.

spectrum css web components lit-element lit-html

@spectrum-web-components/base @spectrum-web-components/shared

@infinitebrahmanuniverse/nolb-_spe @everything-registry/sub-chunk-857 @spectrum-web-components/bundle @swc-react/avatar

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

1 year ago

11 months ago

11 months ago

1 year ago

9 months ago

10 months ago

10 months ago

9 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.33.3-overlay.66

2 years ago

0.33.3-overlay.65

2 years ago

0.33.3-overlay.61

2 years ago

0.31.1-react.21

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.30.1-overlay.30

2 years ago

0.33.1-overlay.39

2 years ago

0.30.1-overlay.31

2 years ago

2 years ago

2 years ago

0.30.1-overlay.38

2 years ago

0.30.1-overlay.37

2 years ago

0.30.1-overlay.41

2 years ago

0.30.1-overlay.42

2 years ago

0.30.1-overlay.40

2 years ago

2 years ago

0.33.1-overlay.41

2 years ago

0.32.1-overlay.33

2 years ago

0.32.1-overlay.41

2 years ago

2 years ago

0.31.1-overlay.29

2 years ago

0.11.3-overlay.22

2 years ago

0.11.5-overlay.18

2 years ago

0.11.5-overlay.17

2 years ago

0.11.5-overlay.14

2 years ago

0.11.5-overlay.13

2 years ago

0.11.5-overlay.15

2 years ago

0.11.5-overlay.10

2 years ago

0.11.5-overlay.12

2 years ago

0.11.5-overlay.11

2 years ago

2 years ago

2 years ago

2 years ago

0.11.3-overlay.8

2 years ago

0.11.3-overlay.9

2 years ago

2 years ago

0.11.2-overlay.8

2 years ago

0.10.6-react.75

2 years ago

0.10.6-react.49

2 years ago

0.10.6-react.48

2 years ago

2 years ago

0.10.6-react.50

2 years ago

0.10.3-react.54

3 years ago

3 years ago

2 years ago

2 years ago

0.10.6-react.32

2 years ago

0.10.5-overlay-warning.19

2 years ago

3 years ago

3 years ago

0.10.0-devmode.0

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.9.12-devmode.7

3 years ago

0.9.12-devmode.0

3 years ago

0.9.13-devmode2.0

3 years ago

0.9.13-devmode.0

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.9.4-express.9

3 years ago

0.9.2-express.41

3 years ago

3 years ago

3 years ago

0.9.3-express.12

3 years ago

4 years ago

4 years ago

4 years ago

0.8.1-lit-next.0

4 years ago

4 years ago

0.7.10-lit-next.47

4 years ago

0.7.10-lit-next.24

4 years ago

4 years ago

0.7.10-lit-next.0

4 years ago

0.7.9-lit-next.42

4 years ago

4 years ago

0.7.9-lit-next.0

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

0.4.4-alpha.178

4 years ago

4 years ago

0.4.4-alpha.169

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago