Thumbnail
El componente Thumbnail nos permite presentar miniaturas de imágenes.
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;El componente cuenta con un contenedor con bordes redondeados.
Usamos el componente Thumbnail cuando necesitamos exhibir imágenes en galerías, descripciones de productos o detalles de pedidos.
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
El componente cuenta con imágenes de ejemplo para construcción de prototipos, además de una variante placeholder.
- Exhibir imágenes de producto
- Exhibir galerías de imágenes
- Exhibir imágenes de detalle de pedidos
- File uploader - Puede ser usado cuando necesitemos hacer carga de archivos o imágenes.
Instalá el 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.