sp-avatar
Attributes and Properties #
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
dir | dir | 'ltr' | 'rtl' | 'ltr' | |
label | label | string | '' | |
size | size | AvatarSize | | |
src | src | string | '' |
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="Dog the User"
src="https://place.dog/500/500"
></sp-avatar>
<sp-avatar
size="75"
label="Dog the User"
src="https://place.dog/500/500"
></sp-avatar>
<sp-avatar
size="100"
label="Dog the User"
src="https://place.dog/500/500"
></sp-avatar>
<sp-avatar
size="200"
label="Dog the User"
src="https://place.dog/500/500"
></sp-avatar>
<sp-avatar
size="300"
label="Dog the User"
src="https://place.dog/500/500"
></sp-avatar>
<sp-avatar
size="400"
label="Dog the User"
src="https://place.dog/500/500"
></sp-avatar>
<sp-avatar
size="500"
label="Dog the User"
src="https://place.dog/500/500"
></sp-avatar>
<sp-avatar
size="600"
label="Dog the User"
src="https://place.dog/500/500"
></sp-avatar>
<sp-avatar
size="700"
label="Dog the User"
src="https://place.dog/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.