Thumbnail

2.3.2

El componente Thumbnail nos permite presentar miniaturas de imágenes.

Default

Emnpty

Skeleton

import React from "react";
import { Thumbnail } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <Thumbnail
    src="https://images.unsplash.com/photo-1525966222134-fcfa99b8ae77?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=943&q=80"
    alt="my-image"
    width="104px"
  />
);

export default Example;

Anatomía del componente

El componente cuenta con un contenedor con bordes redondeados.

Guidelines

Usamos el componente Thumbnail cuando necesitamos exhibir imágenes en galerías, descripciones de productos o detalles de pedidos.

Proporciones y tamaños

No posee tamaños fijos, por lo que su altura y ancho pueden ser definidos libremente, pero existen proporciones que deberían ser respetadas con el objetivo de evitar distorciones e inconsistencias.

Cuadrada - 1:1
Rectangular - 4:3 y 3:4
Rectangular Wide - 16:9 y 9:16
Rectangular Extra Wide - 2:1 y 1:2

Imágenes de ejemplo y placeholders

El componente cuenta con imágenes de ejemplo para construcción de prototipos, además de una variante placeholder.

Recomendaciones de uso

Exhibir imágenes de producto
Exhibir galerías de imágenes
Exhibir imágenes de detalle de pedidos

Componentes relacionados

File uploader - Puede ser usado cuando necesitemos hacer carga de archivos o imágenes.

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/thumbnail

Props

Additional props are passed to the <Thumbnail> element. See img docs for a list of props accepted by the <Thumbnail> element.

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/2' '16/9' '2/1' '3/4' '4/3' '9/16'	'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/2' '16/9' '2/1' '3/4' '4/3' '9/16'	'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.
data-testid	string		This is an attribute used to identify a DOM node for testing purposes.