AvatarAvatar

Avatar, bir kullanıcıyı veya öğeyi temsil etmek için kullanılır. Resimler, simgeler veya karakterler dahil olmak üzere çeşitli formları destekler.

Kullanım Şekli

Bileşeni ihtiyacınıza göre içe aktarın:

import 'mdui/components/avatar.js';

Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın:

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

Kullanım örneği:

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

Örnekler

Resim Avatar

Avatar olarak bir resim bağlantısı belirtmek için src özniteliğini kullanabilir veya varsayılan slot'ta bir <img> öğesi sağlayabilirsiniz.

<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="Resim avatar örneği"/>
</mdui-avatar>

Kaynak Kodu

Resmin konteynır kutusuna nasıl sığacağını tanımlamak için fit özniteliğini kullanabilirsiniz. Bu, yerel object-fit özelliğine benzer.

Simge Avatar

Avatar olarak bir Material Icons simgesi belirtmek için icon özniteliğini kullanabilir veya varsayılan slot'ta bir simge öğesi sağlayabilirsiniz.

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

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

Kaynak Kodu

Karakter Avatar

Varsayılan slot'ta herhangi bir metni avatar olarak kullanabilirsiniz.

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

Kaynak Kodu

API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`src`	`src`	`string`	-
Avatar resminin URL adresi.
`fit`	`fit`	`'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'`	-
Resmin kapsayıcıya nasıl yerleştirileceği, yerel `object-fit` özelliği ile aynı şekilde çalışır. Olası değerler: `contain`: Resmin orijinal en-boy oranını korur, içerik orantılı olarak ölçeklenir `cover`: Resmin orijinal en-boy oranını korur, ancak içeriğin bir kısmı kırpılabilir `fill`: Varsayılan değer, resmin orijinal en-boy oranını korumaz, içerik tüm kapsayıcıyı dolduracak şekilde gerilir `none`: Resmin orijinal boyutlarını korur, içerik ölçeklenmez veya gerilmez `scale-down`: Resmin orijinal en-boy oranını korur, içerik boyutu `none` veya `contain`'den küçük olanla aynıdır
`icon`	`icon`	`string`	-
Avatar için Material Icons simge adı.
`label`	`label`	`string`	-
Avatar için alternatif metin açıklaması.

Slots

Ad
Varsayılan
Özel avatar içeriği; harfler, karakterler, `<img>` öğesi, simgeler vb. olabilir.

CSS Parts

Ad
`image`
Resim avatar olarak kullanıldığında, bileşenin içindeki `<img>` öğesi.
`icon`
Simge avatar olarak kullanıldığında, bileşenin içindeki `<mdui-icon>` öğesi.

CSS Custom Property

Ad
`--shape-corner`
Bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.

Önceki Bölüm

Diğer

Sonraki Bölüm

Badge Rozet