AvatarAwatar

Awatar reprezentuje użytkownika lub przedmioty, obsługuje wiele form, w tym obrazy, ikony lub znaki.

Sposób użycia

Zaimportuj komponent:

import 'mdui/components/avatar.js';

Zaimportuj typ TypeScript komponentu:

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

Przykład użycia:

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

Przykłady

Awatar obrazkowy

Możesz użyć atrybutu src, aby wskazać link do obrazu jako awatar, lub dostarczyć element <img> w domyślnym slocie jako awatar.

<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="Przykład awatara obrazkowego"/>
</mdui-avatar>

Źródło

Możesz użyć atrybutu fit, aby zdefiniować, jak obraz ma być dopasowany do ramki kontenera, podobnie jak natywne object-fit.

Awatar ikonowy

Możesz użyć atrybutu icon, aby wskazać ikonę Material Icons jako awatar, lub dostarczyć element ikony w domyślnym slocie jako awatar.

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

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

Źródło

Awatar znakowy

Możesz użyć dowolnego tekstu w domyślnym slocie jako awatar.

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

Źródło

API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`src`	`src`	`string`	-
Adres URL obrazka awatara
`fit`	`fit`	`'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'`	-
Jak obraz ma być dopasowany do kontenera, tak samo jak natywna właściwość `object-fit`. Dozwolone wartości: `contain`: Zachowuje proporcje obrazu, treść jest skalowana proporcjonalnie `cover`: Zachowuje proporcje obrazu, ale część treści może zostać przycięta `fill`: Wartość domyślna, nie zachowuje proporcji obrazu, treść jest rozciągana, aby wypełnić cały kontener `none`: Zachowuje oryginalny rozmiar obrazu, treść nie jest skalowana ani rozciągana `scale-down`: Zachowuje proporcje obrazu, rozmiar treści jest taki sam jak mniejszy z `none` lub `contain`
`icon`	`icon`	`string`	-
Nazwa ikony Material Icons dla awatara
`label`	`label`	`string`	-
Alternatywny opis tekstowy dla awatara

Slots

Nazwa
(domyślny)
Niestandardowa zawartość awatara, np. tekst, element `<img>`, ikony itp.

CSS Parts

Nazwa
`image`
Element `<img>` komponentu, gdy awatar używa obrazu
`icon`
Element `<mdui-icon>` komponentu, gdy awatar używa ikony

Właściwości niestandardowe CSS

Nazwa
`--shape-corner`
Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych

Poprzedni rozdział

Inne

Następny rozdział

Badge Badge