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.
FileUploader
| Name | Type | Default | Description |
|---|---|---|---|
placeholder | string | Provide additional context to the action. | |
accept | string | 'image/jpeg,image/gif,image/png' | Accept file types |
height | string | '100%' | Height value of the file uploader. Defaults to 100%. |
width | string | '100%' | Width value of the file uploader. Defaults to 100%. |
aspectRatio | '1/1' | '1/1' | Permitted aspect ratios for the size of the file uploader. |
flexDirection | 'column' | 'column' | Defines the position of the placeholder in relation to the icon. |
FileUploader.Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
width | string | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | |
height | string | Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card. | |
aspectRatio | '1/1' | '1/1' | Permitted aspect ratios for the size of the file uploader. |
data-testid | string | This is an attribute used to identify a DOM node for testing purposes. |