MultiFileInput
O MultiFileInput é um componente que permite ao usuário selecionar e carregar múltiplos arquivos de forma organizada.
Quando usar:
- Quando o usuário precisa enviar múltiplos arquivos em um único formulário.
- Para situações onde é importante visualizar a lista de arquivos selecionados antes de finalizar o envio.
- Quando o espaço na interface é limitado, mas a seleção de vários arquivos é um requisito.
Quando não usar:
- Quando apenas um único arquivo precisa ser enviado (nesse caso, um input de arquivo simples é suficiente).
- Se a lista de arquivos selecionados pode se tornar muito longa, ocupando espaço excessivo na tela e prejudicando a usabilidade.
- Em interfaces onde a complexidade do componente pode confundir o usuário, especialmente se o envio de múltiplos arquivos não for uma necessidade comum.
Obs:
- O MultiFileInput é derivado do
FileInput
e possui todos os atributos e eventos dele.
Uso
js
<CdsMultiFileInput
variant="green"
size="md"
text="Lorem Ipsum"
@click="multiFileInputClick = true"
/>
Preview
Arraste o arquivo aqui ou pesquise no seu dispositivo
Os arquivos marcados com o asterisco (*) são obrigatórios:
Comprovante de residência *
Guia de encaminhamento
RG
Passaporte *
Os arquivos adicionados serão exibidos aqui
Props
Nome | Tipo | Default | Opções | Descrição |
---|---|---|---|---|
* documents (required) | array | -- | Especifica os itens que serão exibidos nas opções de arquivos. os itens devem conter, ao menos, os atributos `name` e `required`. | |
variant | string | 'green' | green teal blue indigo violet pink red orange amber dark | Especifica a principal do componente. Essa cor será aplicada aos detalhes de estilo do componente, bem como em seu botão principal. São 10 variantes: 'teal', 'green', 'blue', 'indigo', 'violet', 'pink', 'red', 'orange', 'amber' e 'dark'. |
submitButtonText | string | 'Enviar' | -- | Especifica o texto do botão de submit. |
buttonSecondary | boolean | false | -- | Especifica se o botão de submit é do tipo secundário. |
Eventos
Nome | Descrição |
---|---|
@submit |