SAvatar <s-avatar>

Hiển thị ảnh của một người hoặc doanh nghiệp, hoặc chữ cái viết tắt tên khi không có ảnh. SAvatar là Vue 3 wrapper có type cho web component <s-avatar> của Shopify Polaris.

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

Best practices

• Chọn kích thước theo ngữ cảnh. Dùng size nhỏ hơn cho bố cục dày đặc như bảng và danh sách, và lớn hơn trên trang hồ sơ, nơi con người là trọng tâm.
• Viết alt text hữu ích. Đặt alt là người hoặc thứ mà avatar đại diện, chẳng hạn tên một người hoặc một công ty. Nếu tên đó đã hiển thị dạng văn bản bên cạnh avatar, hãy dùng alt rỗng.
• Đặt avatar cạnh thứ nó đại diện. Đặt avatar ngay bên cạnh tên hoặc đối tượng mà nó đại diện, để mối liên hệ rõ ràng trong danh sách, bảng và thẻ.

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

Xem best practices của Shopify cho <s-avatar> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

Các ảnh bên dưới được tải từ picsum.photos, một dịch vụ ảnh mẫu của bên thứ ba, chỉ nhằm mục đích minh họa.

<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	Kiểu	Mô tả
alt	string	Văn bản thay thế mô tả avatar phục vụ trợ năng. Cung cấp mô tả bằng văn bản về avatar cho người dùng công nghệ hỗ trợ và đóng vai trò dự phòng khi avatar không tải được. Một mô tả được viết tốt giúp người khiếm thị hiểu được nội dung phi văn bản. Khi trình đọc màn hình gặp một avatar, nó sẽ đọc to mô tả này. Khi avatar không tải được, văn bản này sẽ hiển thị trên màn hình, giúp mọi người dùng hiểu nội dung dự định là gì. Tìm hiểu thêm về cách viết alt text hiệu quả và thuộc tính alt.
initials	string	Chữ cái viết tắt hiển thị trong avatar khi không có ảnh hoặc ảnh không tải được. Thường là một hoặc hai ký tự đại diện cho chữ cái đầu của tên và họ một người, ví dụ "JD" cho John Doe.
size	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200"	Kích thước của ảnh avatar. - small-200: Avatar cực nhỏ, phù hợp cho hiển thị gọn hoặc danh sách có nhiều mục. - small-100: Bí danh của small. - small: Avatar nhỏ, phù hợp cho ngữ cảnh phụ hoặc bố cục chật. - base: Kích thước mặc định, phù hợp với hầu hết ngữ cảnh. - large: Avatar lớn để nhấn mạnh hoặc khi avatar là điểm nhấn. - large-100: Bí danh của large. - large-200: Avatar cực lớn để hiển thị nổi bật.
src	string	URL hoặc đường dẫn tới ảnh avatar. Khi được cung cấp, ảnh được ưu tiên hơn initials. Nếu ảnh không tải được hoặc tải chậm, initials sẽ được render làm phương án dự phòng.

Events

Event	Kiểu
error	Event
load	Event

Lắng nghe các event này bằng listener dạng @error trên <SAvatar>.