Thumbnail

2.3.2

O componente Thumbnail nos permite apresentar miniaturas de imagens.

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;

Anatomia do componente

O componente é composto por um container com cantos arredondados.

Guidelines

Utilizamos o componente Thumbnail quando precisamos exibir imagens em galerias, descrições de produtos ou detalhes de pedidos.

Proporções e tamanhos

O componente não possui tamanhos fixos, ou seja sua altura ou largura podem ser definidos livremente, contudo existem proporções que devem ser respeitadas com o objetivo de evitar distorções e inconsistências.

Quadrada - 1:1
Retangular - 4:3 e 3:4
Retangular Wide - 16:9 e 9:16
Retangular Extra Wide - 2:1 e 1:2

Imagens exemplo e placeholder

O componente conta com imagens de exemplo para construção de prototipos, além de uma variante placeholder.

Recomendação de uso

Exibir imagens de produtos
Exibir galerias de imagens
Exibir imagens de detalhes de pedido

Componentes relacionados

File uploader - Pode ser utilizado quando precisamos fazer upload de arquivos ou imagens.

Implementação

Instale o 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.