AvatarAvatar

Az avatar felhasználók vagy tárgyak megjelenítésére szolgál, támogatja a különböző formákat, beleértve a képeket, ikonokat vagy karaktereket.

Használat

A komponens importálása:

import 'mdui/components/avatar.js';

A komponens TypeScript-típusának importálása:

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

Példa:

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

Példák

Kép avatar

A src attribútummal egy képlinket adhat meg avatárként, vagy az alapértelmezett slotban egy <img> elemet helyezhet el avatárként.

<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="Példa kép avatarra"/>
</mdui-avatar>

Forrás

A fit attribútummal meghatározhatja, hogy a kép hogyan illeszkedjen a konténerbe, hasonlóan a natív object-fit tulajdonsághoz.

Ikon avatar

A Material Icons ikont avatarként az icon attribútummal adhatja meg, az alapértelmezett slotban pedig ikont helyezhet el.

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

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

Forrás

Karakter avatar

Az alapértelmezett slotban tetszőleges szöveget használhat avatarként.

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

Forrás

API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`src`	`src`	`string`	-
Az avatar kép URL címe.
`fit`	`fit`	`'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'`	-
A kép illesztési módja a konténeren belül, megegyezik az eredeti `object-fit` tulajdonsággal. A lehetséges értékek: `contain`: Méretarány megtartása, a tartalom arányosan lesz átméretezve `cover`: Méretarány megtartása, de a tartalom egy része levágásra kerülhet `fill`: Alapértelmezett érték, nem tartja meg a méretarányt, a tartalom kitölti a teljes konténert `none`: Eredeti méret megtartása, a tartalom nem lesz átméretezve vagy nyújtva `scale-down`: Méretarány megtartása, a tartalom mérete a `none` vagy `contain` közül a kisebbik lesz
`icon`	`icon`	`string`	-
Az avatar Material Icons ikonjának neve.
`label`	`label`	`string`	-
Az avatar alternatív szöveges leírása.

Slots

Név
(alapértelmezett)
Egyéni avatar tartalom, lehet betű, karakter, `<img>` elem, ikon stb.

CSS Parts

Név
`image`
Ha képet használunk avatarként, a komponensen belüli `<img>` elem.
`icon`
Ha ikont használunk avatarként, a komponensen belüli `<mdui-icon>` elem.

CSS egyéni tulajdonságok

Név
`--shape-corner`
A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.

Előző fejezet

Egyebek

Következő fejezet

Badge Badge