File uploader
O componente File Uploader é utilizado para fazer o upload de arquivos.
import React from "react";
import { FileUploader } from "@nimbus-ds/components";
const Example: React.FC = () => (
<FileUploader placeholder="Helper text" width="104px" />
);
export default Example;O componente é composto por um caixa com ícone de mais e um label opcional.
Utilizamos esse componente para receber arquivos por meio de um upload.
O componente não possui tamanhos fixos, ou seja sua altura ou largura podem ser definidos, contudo existem proporções recomendadas que seguem o mesmo padrão do componente Thumbnail. Também é possível utilizar a proporção flexível de acordo com a necessidade dos arquivos.
- Quadrada - 1:1
- Retangular - 4:3 e 3:4
- Retangular Wide - 16:9 e 9:16
- Retangular Extra Wide - 2:1 e 1:2
- Flexível - Proporção livre
O componente conta com duas opções de orientação para o helper text e ícone, são elas a horizontal e vertical que podem ser escolhidas de acordo com o tamanho e proporção utilizadas.
- Receber comprovantes de pagamento
- Receber imagens de produtos
- Receber planilhas com dados de produtos
- Thumbnail - Pode ser utilizado para exibir imagens de produtos em uma galeria.
Instale o componente via terminal.
npm install @nimbus-ds/file-uploaderAdditional props are passed to the <FileUploader> element. See input docs for a list of props accepted by the <FileUploader> element.