SThumbnail <s-thumbnail>
Một ảnh xem trước nhỏ, kích thước cố định, của một sản phẩm hoặc tệp. SThumbnail là Vue 3 wrapper có type cho web component <s-thumbnail> của Shopify Polaris.
ts
import { SThumbnail } from 'polaris-vue-elements'Best practices
size="small-200"cho những chỗ chật nhất. Chỉ dùng ở nơi không gian rất hạn chế.size="small"cho không gian nhỏ. Dùng khi thumbnail phải vừa trong một khu vực nhỏ gọn.size="base"làm mặc định. Bắt đầu từ đây trừ khi bố cục cần kích thước khác.size="large"khi hình ảnh là trọng tâm. Dùng khi thumbnail là điểm thu hút sự chú ý chính.
Xem best practices của Shopify cho <s-thumbnail> (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.
vue
<script setup>
import { SThumbnail } from 'polaris-vue-elements'
</script>
<template>
<SThumbnail src="https://picsum.photos/seed/polaris-thumb/100" alt="Product photo" size="small" />
<SThumbnail src="https://picsum.photos/seed/polaris-thumb/100" alt="Product photo" size="base" />
<SThumbnail src="https://picsum.photos/seed/polaris-thumb/100" alt="Product photo" size="large" />
<!-- No src: renders a placeholder -->
<SThumbnail alt="Product photo not yet uploaded" size="base" />
</template>Props
| Prop | Kiểu | Mô tả |
|---|---|---|
alt | string | Mô tả bằng văn bản thay thế cho hình ảnh để người đọc hiểu hình ảnh nói về điều gì. Điều này cực kỳ hữu ích cho cả người dùng công nghệ hỗ trợ lẫn người dùng nhìn thấy được. Một mô tả được viết tốt giúp người khiếm thị có thể tham gia tiếp nhận nội dung phi văn bản. Khi trình đọc màn hình gặp một s-image, mô tả sẽ được đọc to lên. Nếu hình ảnh không tải được, có thể do kết nối kém, alt sẽ được hiển thị trên màn hình thay thế. Điều này có lợi ở chỗ cho người mua nhìn thấy được biết rằng lẽ ra có một hình ảnh được tải ở đây, và thay vào đó họ vẫn có thể tiếp nhận nội dung văn bản. Đọc những lưu ý khi viết văn bản thay thế để tìm hiểu thêm. |
loading | "eager" | "lazy" | Xác định hành vi tải của hình ảnh: - eager: Tải hình ảnh ngay lập tức, bất kể vị trí của nó trong viewport đang hiển thị. - lazy: Trì hoãn việc tải hình ảnh cho đến khi nó tiến gần tới một khoảng cách xác định so với viewport. |
size | "base" | "small-200" | "small-100" | "small" | "large" | "large-100" | Kích thước của ảnh thumbnail sản phẩm. - small-200: Kích thước thumbnail nhỏ nhất, lý tưởng cho danh sách hoặc bảng sản phẩm gọn. - small-100: Thumbnail rất nhỏ, phù hợp cho bố cục dày đặc. - small: Thumbnail nhỏ cho ngữ cảnh hạn chế không gian. - base: Kích thước mặc định, cân bằng giữa khả năng hiển thị và tiết kiệm không gian. - large: Thumbnail lớn hơn cho sản phẩm nổi bật hoặc chế độ xem chi tiết. - large-100: Thumbnail cực lớn để hiển thị sản phẩm nổi bật. |
src | string | Nguồn ảnh (URL từ xa hoặc tài nguyên file cục bộ). Khi ảnh đang tải hoặc không có src, một placeholder sẽ được render. |
Events
| Event | Kiểu |
|---|---|
error | CustomEvent |
load | CustomEvent |
Lắng nghe các event này bằng listener dạng @error trên <SThumbnail>.