# Avatars
v-avatar
コンポーネントは、主に円形のユーザープロフィール画像を表示するのに使用できます。 v-avatar コンポーネントでは、レスポンシブな画像、アイコン、テキストのサイズ変更と、border radius の値の追加を動的に行うことができます。 border radius のないアバターを表示するため tile のバリエーションが使用できます。
# 使い方
最も単純なアバターは、円形のコンテナ内にコンテンツを表示するものです。
# API
# Props
# Size
size
prop では、v-avatar
の高さと幅を設定できます。 この prop では、アスペクト比1:1を保ちながらサイズを変更します。 size prop は、height
と width
の 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