Avatar

Avatare stellen eine Person oder ein Objekt dar. Sie unterstützen verschiedene Formen, darunter Bilder, Symbole oder Zeichen.

Verwendung

Importieren Sie die Komponente nach Bedarf:

import 'mdui/components/avatar.js';

Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:

import type { Avatar } from 'mdui/components/avatar.js';

Beispiel:

<mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>

Beispiele

Bild-Avatar

Mit dem Attribut src legen Sie einen Bildlink als Avatar fest oder stellen im default Slot ein <img>-Element als Avatar bereit.

<mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>

<mdui-avatar>
  <img src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4" alt="Beispiel für Bild-Avatar"/>
</mdui-avatar>

Quellcode

Sie können mit dem Attribut fit festlegen, wie das Bild in den Container passt, ähnlich wie beim nativen object-fit.

Symbol-Avatar

Mit dem Attribut icon legen Sie ein Material Icons-Symbol als Avatar fest oder stellen im default Slot ein Symbol-Element als Avatar bereit.

<mdui-avatar icon="people_alt"></mdui-avatar>

<mdui-avatar>
  <mdui-icon name="people_alt"></mdui-icon>
</mdui-avatar>

Quellcode

Zeichen-Avatar

Im default Slot können Sie beliebigen Text als Avatar verwenden.

<mdui-avatar>A</mdui-avatar>

Quellcode

API

Eigenschaften

Attribut	Property	Typ	Standard
`src`	`src`	`string`	-
URL des Avatar-Bildes.
`fit`	`fit`	`'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'`	-
Methode zur Bildanpassung, ähnlich der CSS-Eigenschaft `object-fit`. Mögliche Werte: `contain`: Skaliert das Bild, um es in die Box einzupassen, wobei das Seitenverhältnis beibehalten wird. Das Bild wird "letterboxed" dargestellt, wenn die Seitenverhältnisse nicht übereinstimmen. `cover`: Skaliert das Bild, um die Box zu füllen, wobei das Seitenverhältnis beibehalten wird. Das Bild wird beschnitten, wenn die Seitenverhältnisse nicht übereinstimmen. `fill`: Standard. Skaliert das Bild, um die Box zu füllen; das Bild kann gestreckt werden, wenn die Seitenverhältnisse nicht übereinstimmen. `none`: Keine Skalierung. `scale-down`: Skaliert das Bild herunter, um es einzupassen. Verhält sich wie `none` oder `contain`, je nachdem, welches Ergebnis das kleinere Bild liefert.
`icon`	`icon`	`string`	-
Der Name des Material Icons für den Avatar.
`label`	`label`	`string`	-
Textbeschreibung des Avatars.

Slots

Name
Standard
Eigener Avatar-Inhalt, z. B. Buchstaben, `<img>`-Elemente oder Icons.

CSS Parts

Name
`image`
Internes `<img>`-Element bei Verwendung eines Bild-Avatars.
`icon`
Internes `<mdui-icon>`-Element bei Verwendung eines Icon-Avatars.

CSS Custom Property

Name
`--shape-corner`
Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.

Vorherige Seite

Weitere

Nächste Seite

Badge