Thumbnail
O componente Thumbnail nos permite apresentar miniaturas de imagens.
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;O componente é composto por um container com cantos arredondados.
Utilizamos o componente Thumbnail quando precisamos exibir imagens em galerias, descrições de produtos ou detalhes de pedidos.
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
O componente conta com imagens de exemplo para construção de prototipos, além de uma variante placeholder.
- Exibir imagens de produtos
- Exibir galerias de imagens
- Exibir imagens de detalhes de pedido
- File uploader - Pode ser utilizado quando precisamos fazer upload de arquivos ou imagens.
Instale o componente via terminal.
npm install @nimbus-ds/thumbnailAdditional props are passed to the <Thumbnail> element. See img docs for a list of props accepted by the <Thumbnail> element.