Thumbnail
Permite mostrar la miniatura de una imagen, con un placeholder automático cuando la imagen no está disponible.
- Mostrar la imagen de un producto: representar de forma compacta la foto principal de un producto en un listado, una tabla o un selector de variantes. Ej.: la miniatura de cada fila en un listado de productos.
- Mostrar el contenido de una galería: exhibir un conjunto de imágenes o archivos multimedia de forma uniforme, respetando una proporción fija por celda. Ej.: la galería de fotos de un producto.
- Referenciar un pedido o un archivo con imagen: dar contexto visual rápido a un ítem que tiene una imagen asociada, sin que la imagen sea el foco principal de la pantalla. Ej.: la miniatura del producto en el detalle de un pedido.
- Representar la imagen principal de una pantalla: cuando la imagen necesita protagonismo (banner, portada, imagen destacada). En su lugar, usar la etiqueta <img> nativa o un componente de layout propio con el tamaño que el caso requiera.
- Superponer una acción sobre la miniatura: cuando además de mostrar la imagen se necesita una acción sobre ella, como un ícono de eliminar o un checkbox de selección en una esquina. En su lugar, usar Thumbnail with action.
- Permitir subir o reemplazar una imagen: cuando el objetivo es capturar un archivo del usuario, no solo mostrarlo. En su lugar, usar File uploader.
Con imagen
Sin imagen (placeholder automático)
- Container: superficie con bordes redondeados que recorta y contiene la imagen o el placeholder, con el tamaño y la proporción definidos por width y aspectRatio.
- Icon: cuando no se pasa src, el componente renderiza automáticamente este ícono de cámara dentro del Container, a modo de placeholder; no requiere ninguna prop adicional.
1/1 (default): proporción cuadrada, la más frecuente en listados y galerías de producto. Ej.: la miniatura de un producto en una tabla.
4/3: proporción rectangular horizontal, para imágenes con más ancho que alto. Ej.: la foto de un ambiente o de un local.
3/4: proporción rectangular vertical, para imágenes con más alto que ancho. Ej.: la foto de una prenda de indumentaria.
16/9: proporción wide horizontal, para contenido tipo video o portada. Ej.: la miniatura de un video de producto.
9/16: proporción wide vertical, para contenido tipo historia o video vertical. Ej.: la miniatura de un video grabado desde un celular.
2/1: proporción extra wide horizontal, para imágenes muy panorámicas. Ej.: la portada de una colección.
1/2: proporción extra wide vertical, para imágenes muy alargadas. Ej.: un banner lateral angosto.
Ancho fijo (ej. 72px): valor recomendado en listados y tablas, donde el tamaño se repite en cada fila. Ej.: la miniatura de producto en un listado.
100% (default): ocupa todo el ancho del contenedor que lo envuelve. Ej.: cada celda de una grilla de galería con columnas de ancho variable.
El Thumbnail aparece junto al nombre o al identificador principal de un ítem, en contextos donde ese ítem tiene una imagen asociada: filas de listados de productos, tablas de pedidos, selectores de variantes y celdas de una galería. Cuando el ítem no tiene imagen, el propio componente reemplaza la imagen por el placeholder de cámara, sin que el contexto de alrededor necesite cambiar.
Dejar que el componente muestre su placeholder automático cuando el producto no tiene imagen.
Evitar armar un placeholder propio en lugar del que ya provee el componente.
Mantener la misma proporción (aspectRatio) en todas las miniaturas de un mismo listado o galería.
Evitar mezclar proporciones distintas dentro del mismo listado o galería: rompe la grilla visual.
- Texto alternativo obligatorio: alt es una prop requerida; debe describir el contenido de la imagen, no repetir "imagen" ni "foto". Ej.: alt="Zapatillas deportivas azules", no alt="imagen".
- Placeholder sin dependencia del color: cuando no hay imagen, el ícono de cámara comunica la ausencia de contenido por su forma, sin depender únicamente de un color o un fondo distinto para transmitir el estado.
- Recorte accesible del contenido: la imagen se recorta con object-fit: cover dentro del Container, por lo que conviene usar imágenes centradas en el sujeto principal para que el recorte no oculte la parte relevante.
Instalá el componente vía terminal.
npm install @nimbus-ds/componentsimport React from "react";
import { Thumbnail } from "@nimbus-ds/components";
import { SHOES_IMAGE_URL } from "../../../lib/mocks/mock-images";
const Example: React.FC = () => (
<Thumbnail
src={SHOES_IMAGE_URL}
alt="Sports sneakers"
width="104px"
/>
);
export default Example;Las propiedades adicionales se pasan al elemento <Thumbnail>. Consultá la documentación del elemento img para ver la lista de atributos aceptados.
- File uploader — Para permitir que el usuario suba o reemplace una imagen o un archivo, en lugar de solo mostrarla.
- Thumbnail with action — Para superponer una acción (ícono, checkbox) en una esquina de la miniatura.
Thumbnail
| Name | Type | Default | Description |
|---|---|---|---|
alt* | string | The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. | |
children | React.ReactNode | The content of the thumbnail. | |
aspectRatio | '1/1' | '1/1' | Permitted aspect ratios for the size of the thumbnail image. |
width | string | '100%' | Width value of the thumbnail image. Defaults to 100%. |
Thumbnail.Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
aspectRatio | '1/1' | '1/1' | Permitted aspect ratios for the size of the thumbnail image. |
width | string | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | |
className | string | ||
data-testid | string | This is an attribute used to identify a DOM node for testing purposes. |
Ayudanos a mejorar la documentación
¿Encontraste un problema o tenés una sugerencia? Contanos.