# Avatars

v-avatar コンポーネントは、主に円形のユーザープロフィール画像を表示するのに使用できます。 v-avatar コンポーネントでは、レスポンシブな画像、アイコン、テキストのサイズ変更と、border radius の値の追加を動的に行うことができます。 border radius のないアバターを表示するため tile のバリエーションが使用できます。

# 使い方

最も単純なアバターは、円形のコンテナ内にコンテンツを表示するものです。

# API

# Props

# Size

size prop では、v-avatar の高さと幅を設定できます。 この prop では、アスペクト比1:1を保ちながらサイズを変更します。 size prop は、heightwidth の prop で上書きできます。

# Tile

tile prop を指定すると、アバターから border radius を取り除き、シンプルな正方形のアバターにします。

# Slots

# デフォルト

v-avatar のデフォルト slot は、v-icon コンポーネント、画像、テキストを受け取ります。 これらを他のpropsと混ぜ合わせて、ユニークなものを作ります。

# その他

# 高度な使用方法

Avatar と他のコンポーネントを組み合わせることで、革新的で美しいユーザーインターフェイスをすぐに構築することができます。

アバターをメニューと組み合わせる、もう1つの例です。

# プロファイルカード

tile prop を使用すると、洗練された力強いプロフィールカードを作成できます。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:11/12/2024, 6:59:50 AM