fast-avatar
The fast-avatar
component is used to graphically represent a user or an object.
Setup
Basic Setup
import {
provideFASTDesignSystem,
fastAnchoredRegion
} from "@microsoft/fast-components";
provideFASTDesignSystem()
.register(
fastAvatar()
);
Custom Media
import { Avatar } from "@microsoft/fast-foundation";
import {
provideFASTDesignSystem,
fastAnchoredRegion
} from "@microsoft/fast-components";
const imgTemplate = html<Avatar>`
...your own template that controls rendering images...
`;
provideFASTDesignSystem()
.register(
fastAvatar({
media: imgTemplate
})
);
Usage
Basic Usage
<fast-avatar
src="..."
alt="..."
link="...">
</fast-avatar>
Used with a Badge
<fast-avatar
src="..."
alt="..."
link="...">
<fast-badge slot="badge"> </fast-badge>
</fast-avatar>
Filled, Colored, and Shaped
The fill
and color
attributes of the avatar create CSS custom properties which can be used to style the control.
fast-avatar {
--avatar-fill-primary: #00FF00;
--avatar-fill-danger: #FF0000;
--avatar-color-light: #FFFFFF;
--avatar-color-dark: #000000;
}
While the shape
attribute lets you choose between circle
(default) or square
:
<fast-avatar
src="..."
alt="..."
link="..."
fill="primary"
color="dark"
shape="square">
</fast-avatar>
Create your own design
import {
AvatarOptions,
Avatar,
avatarTemplate as template,
} from "@microsoft/fast-foundation";
import { avatarStyles as styles } from "./my-avatar.styles";
export const myAvatar = Avatar.compose<AvatarOptions>({
baseName: "avatar",
template,
styles,
media: imgTemplate,
shadowOptions: {
delegatesFocus: true,
},
});
note
This component is built with the expectation that focus is delegated to the anchor element rendered into the shadow DOM.
API
class: Avatar
Superclass
Name | Module | Package |
---|---|---|
FoundationElement | /src/foundation-element/foundation-element.js |
Fields
Name | Privacy | Type | Default | Description | Inherited From |
---|---|---|---|---|---|
fill | public | string | Indicates the Avatar should have a color fill. | ||
color | public | string | Indicates the Avatar should have a text color. | ||
link | public | string | Indicates the Avatar should have url link | ||
shape | public | AvatarShape | Indicates the Avatar shape should be. By default it will be set to "circle". | ||
$presentation | public | ComponentPresentation or null | A property which resolves the ComponentPresentation instance for the current component. | FoundationElement | |
template | public | ElementViewTemplate or void or null | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition. | FoundationElement | |
styles | public | ElementStyles or void or null | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement |
Methods
Name | Privacy | Description | Parameters | Return | Inherited From |
---|---|---|---|---|---|
templateChanged | protected | void | FoundationElement | ||
stylesChanged | protected | void | FoundationElement |
Attributes
Name | Field | Inherited From |
---|---|---|
fill | fill | |
color | color | |
link | link | |
shape | shape |
CSS Parts
Name | Description |
---|---|
backplate | The wrapping container for the avatar |
link | The avatar link |
media | The media slot |
content | The default slot |
Slots
Name | Description |
---|---|
media | Used for media such as an image |
The default slot for avatar text, commonly a name or initials | |
badge | Used to provide a badge, such as a status badge |