Avatarアバター

アバターはユーザーや物事を表現するために使用され、画像、アイコン、文字など、さまざまな形式をサポートしています。

使用方法

コンポーネントを必要に応じてインポートします：

import 'mdui/components/avatar.js';

コンポーネントの TypeScript 型を必要に応じてインポートします：

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

使用例：

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

例

画像アバター

src 属性を使用して画像リンクをアバターとして指定するか、デフォルトスロットに <img> 要素を提供してアバターにすることができます。

<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="画像アバターの例"/>
</mdui-avatar>

ソース

fit 属性を使用して、ネイティブの object-fit と同様に、画像をコンテナボックスにどのように適合させるかを定義できます。

アイコンアバター

icon 属性を使用して Material Icons アイコンをアバターとして指定するか、デフォルトスロットにアイコン要素を提供してアバターにすることができます。

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

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

ソース

文字アバター

デフォルトスロットに任意のテキストを使用してアバターにすることができます。

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

ソース

API

プロパティ

HTML 属性	JavaScript プロパティ	型	デフォルト値
`src`	`src`	`string`	-
アバター画像のURLアドレスです。
`fit`	`fit`	`'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'`	-
画像をコンテナボックスにどのように収めるかを指定します。ネイティブの `object-fit` 属性と同じです。次の値を指定します： `contain`：画像の元のアスペクト比を維持し、コンテンツは縦横比を保ったまま拡大縮小されます `cover`：画像の元のアスペクト比を維持しますが、コンテンツの一部が切り取られる場合があります `fill`：デフォルト値。画像の元のアスペクト比を維持せず、コンテナ全体を埋めるようにコンテンツが引き伸ばされます `none`：画像の元のサイズを保持し、コンテンツは拡大縮小または引き伸ばされません `scale-down`：画像の元のアスペクト比を維持し、コンテンツのサイズは `none` または `contain` のうち小さい方と同じになります
`icon`	`icon`	`string`	-
アバターに使用するMaterial Iconsのアイコン名です。
`label`	`label`	`string`	-
アバターの代替テキストによる説明です。

Slots

名前
デフォルト
カスタムアバターコンテンツ。文字、漢字、`<img>` 要素、アイコンなどを指定できます。

CSS Parts

名前
`image`
画像をアバターとして使用する場合の、コンポーネント内部の `<img>` 要素
`icon`
アイコンをアバターとして使用する場合の、コンポーネント内部の `<mdui-icon>` 要素

CSS カスタムプロパティ

名前
`--shape-corner`
コンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。

前の章

その他

次の章

Badge バッジ