Sistema de diseño
Drag and drop
Componente que permite a los usuarios arrastrar elementos de una ubicación a otra dentro de una aplicación o sitio web.
Figma
Storybook
AEM
Overview
Los usuarios pueden hacer clic y mantener presionado un elemento con el ratón o el dedo (en dispositivos táctiles) para moverlo dentro del componente. Una vez que el usuario ha arrastrado el elemento al componente, puede soltarlo para completar la acción.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
Este componente tiene varios estados que se documentan como variantes del mismo.
Default
Su estado por defecto antes de que ningún usuario arrastre ningún archivo.
Item Hover
Estado que muestra que tenemos algún elemento sobre el componente y que podríamos soltarlo para que fuera incorporado.
Loading
Se utiliza específicamente durante el proceso de carga de archivos. Muestra un indicador visual que informa al usuario que el archivo se está cargando.
Filled
Cuando el componente ya tiene cargado el elemento que hayamos soltado sobre él.
Error
Variante de feedback que informa al usuario cuando un proceso de carga falla.
Disabled
Estado que puede aparecer cuando no se puede interactuar con el componente.
Tipos de archivos que pueden aparecer dentro del Drag & Drop
Nombre
Descripción / Uso
Ejemplo
File
Image
Estados de los tipos de archivos que pueden aparecer dentro del Drag & Drop
Nombre
Descripción / Uso
Ejemplo
Uploading
Uploaded
Ready
Opciones
Este componente es muy versátil y tiene algunas opciones dentro de su configuración.
Progress bar
Puede aparecer una progress bar dentro para dar feedback al usuario del proceso de carga de su archivo.
Actions
Pueden mostrar detalles adicionales para explicar la acción, o bien presentarse sin información adicional.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Durante el proceso de arrastre, el elemento generalmente cambia de apariencia para mostrar que se está moviendo. El área de destino suele resaltar o modificar su apariencia para indicar dónde se puede soltar el elemento.
Drop
Puedes soltar ficheros en la caja para cargarlos en el servidor.
Overflow file
Cuando el nombre de un archivo excede el espacio disponible, se truncará con una elipsis.
Multiple files
La caja se expande verticalmente si hay más elementos. Si el contenido supera el espacio visible, puedes hacer scroll para verlo completo.
Uploading file
Durante la carga de archivos, al completar una subida, el ícono se transformará en un check. La barra de progreso continuará activa hasta que todas las cargas hayan finalizado
Menu dropdown
Desde el menú podremos eliminar el archivo o realizar otra acción en caso de que sea necesario.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes