SAvatar `<s-avatar>`

人物や事業者の画像を表示します。画像がない場合はイニシャルを表示します。 SAvatar は、Shopify Polaris の <s-avatar> web component 向けの型付き Vue 3 wrapper です。

import { SAvatar } from 'polaris-vue-elements'

ベストプラクティス

コンテキストに合わせてサイズを選ぶ。 テーブルやリストのような密度の高いレイアウトでは小さめの size を、人物が主役となるプロフィールページでは大きめのものを選びます。
役に立つ代替テキストを書く。 alt には、人物名や会社名など、アバターが表す人やものを設定します。その名前がすでにアバターの横にテキストとして表示されている場合は、空の alt を使います。
表す対象のすぐ横に置く。 アバターは、それが表す名前やエンティティのすぐ横に配置し、リスト、テーブル、カードの中でも関係がはっきりわかるようにします。

vue

<SAvatar alt="Sarah Chen" initials="SC" size="large" />

詳しいガイダンスについては、<s-avatar> に関する Shopify のベストプラクティス（英語）を参照してください。

例

以下の画像は、デモ目的でのみ、サードパーティのプレースホルダー画像サービスである picsum.photos から読み込んでいます。

vue

<script setup>
import { SAvatar } from 'polaris-vue-elements'
</script>

<template>
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="small" />
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="base" />
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="large" />

  <!-- No src: falls back to initials -->
  <SAvatar initials="AL" alt="Ada Lovelace" size="large" />
</template>

Props

Prop	型	説明
`alt`	`string`	アクセシビリティのためにアバターを説明する代替テキストです。支援技術を使用するユーザーにアバターのテキスト説明を提供し、アバターの読み込みに失敗した場合のフォールバックとしても機能します。適切に書かれた説明により、視覚障害のある人も非テキストコンテンツを理解できます。スクリーンリーダーはアバターに到達すると、この説明を読み上げます。アバターの読み込みに失敗した場合はこのテキストが画面に表示され、すべてのユーザーが本来表示されるはずだった内容を理解できます。効果的な代替テキストの書き方と alt 属性について詳しくはリンク先を参照してください。
`initials`	`string`	画像が指定されていない場合や読み込みに失敗した場合に、アバターに表示するイニシャルです。通常は人物の姓名のイニシャルを表す 1〜2 文字で、たとえば John Doe なら "JD" のようになります。
`size`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "large-200"`	アバター画像のサイズです。 - `small-200`: 特に小さいアバターで、コンパクトな表示や多くの項目を含むリストに適しています。 - `small-100`: `small` のエイリアスです。 - `small`: 小さいアバターで、補助的なコンテキストや窮屈なレイアウトに適しています。 - `base`: ほとんどのコンテキストで適切に機能するデフォルトのサイズです。 - `large`: 強調したい場合やアバターが注目の中心となる場合の大きいアバターです。 - `large-100`: `large` のエイリアスです。 - `large-200`: 目立たせて表示するための特に大きいアバターです。
`src`	`string`	アバター画像の URL またはパスです。指定すると、画像が `initials` よりも優先されます。画像の読み込みに失敗した場合や読み込みが遅い場合は、フォールバックとして `initials` が描画されます。

Events

Event	型
`error`	`Event`
`load`	`Event`

これらのイベントは <SAvatar> 上で @error 形式のリスナーで受け取れます。

SAvatar <s-avatar> ​

ベストプラクティス ​

例 ​

Props ​

Events ​

SAvatar `<s-avatar>`

ベストプラクティス

例

Props

Events