Back to Slint

Avatar

ui-libraries/material/docs/src/content/docs/components/avatar.mdx

1.16.1917 B
Original Source

import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro'; import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';

<CodeSnippetMD imagePath="" noScreenShot scale="3" imageWidth="300" imageHeight="200" imageAlt=""> ```slint import { Avatar } from "@material"; export component Example inherits Window { width: 100px; height: 100px; background: transparent; Avatar { image: @image-url("profile.jpg"); x: 10px; y: 10px; } } ``` </CodeSnippetMD>

An Avatar is a circular component that displays a user's profile picture or image.

Properties

background

<SlintProperty propName="background" typeName="color" defaultValue="MaterialPalette.primary"> The background color of the avatar. </SlintProperty>

image

<SlintProperty propName="image" typeName="image"> The image to display in the avatar. </SlintProperty>