AvatarAvatar

Avatar se používá k reprezentaci uživatele nebo objektu a podporuje různé formy, včetně obrázků, ikon nebo znaků.

Způsob použití

Importujte komponentu podle potřeby:

import 'mdui/components/avatar.js';

Importujte TypeScript typy komponenty podle potřeby:

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

Příklad použití:

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

Příklady

Obrázkový avatar

Můžete použít atribut src k určení odkazu na obrázek jako avatar, nebo poskytnout prvek <img> ve výchozím slotu jako avatar.

<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říklad obrázkového avataru"/>
</mdui-avatar>

Zdrojový kód

Můžete použít atribut fit k definování, jak se obrázek přizpůsobí rámečku, podobně jako nativní object-fit.

Ikonový avatar

Můžete použít atribut icon k určení ikony Material Icons jako avatar, nebo poskytnout prvek ikony ve výchozím slotu jako avatar.

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

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

Zdrojový kód

Znakový avatar

Můžete použít libovolný text ve výchozím slotu jako avatar.

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

Zdrojový kód

API

Vlastnosti

Atribut	Vlastnost	Typ	Výchozí
`src`	`src`	`string`	-
URL adresa obrázku avataru.
`fit`	`fit`	`'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'`	-
Způsob přizpůsobení obrázku kontejneru. Odpovídá CSS vlastnosti `object-fit`. Možné hodnoty: `contain`: Zachová poměr stran obrázku, obsah se proporcionálně zmenší. `cover`: Zachová poměr stran obrázku, ale část obsahu může být oříznuta. `fill`: Výchozí hodnota. Nezachová poměr stran, obsah se roztáhne tak, aby vyplnil celý kontejner. `none`: Zachová původní rozměry obrázku, obsah se neškáluje ani neroztahuje. `scale-down`: Zachová poměr stran obrázku, výsledná velikost je stejná jako u `none` nebo `contain`, podle toho, která je menší.
`icon`	`icon`	`string`	-
Název ikony z knihovny Material Icons použitý pro avatar.
`label`	`label`	`string`	-
Alternativní textový popis avataru.

Slots

Název
(výchozí)
Vlastní obsah avataru. Může to být písmeno, znak, prvek `<img>`, ikona atd.

CSS Parts

Název
`image`
Prvek `<img>` uvnitř komponenty, pokud je jako avatar použit obrázek.
`icon`
Prvek `<mdui-icon>` uvnitř komponenty, pokud je jako avatar použita ikona.

CSS Custom Properties

Název
`--shape-corner`
Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.

Předchozí kapitola

Ostatní

Další kapitola

Badge Odznak