co-drop-zone
This content is not available in your language yet.
Envuelve contenido arbitrario y muestra una superposición punteada encima mientras hay un arrastre en curso. Puede controlarse desde el consumidor con active o autogestionarse escuchando los eventos nativos de drag, emitiendo coDrop y coDragStateChange.
Ver código
<co-drop-zone active label="Suelta para subir" icon="upload-simple">
<div style="width:100%;height:200px;border-radius:16px;background:var(--co-color-gray-100)"></div>
</co-drop-zone>Props
| Prop | Atributo | Tipo | Default | Descripción |
|---|---|---|---|---|
accent | accent | string | 'var(--co-color-primary-azul)' | Accent color for the dashed border, badge icon and tinted background. |
active | active | boolean | false | Whether the drag-to-upload overlay is visible. |
icon | icon | string | 'upload-simple' | Phosphor icon name shown in the badge. |
label | label | string | 'Suelta para subir' | Overlay label text. |
Eventos
| Evento | Detail | Bubbles | Cancelable | Descripción |
|---|---|---|---|---|
coDragStateChange | boolean | ✓ | ✓ | Emitted whenever the internal drag-over state flips. |
coDrop | File[] | ✓ | ✓ | Emitted with the dropped files. |
Slots
Este componente no expone slots.
CSS Parts
| Part | Descripción |
|---|---|
::part(badge) | |
::part(host) | |
::part(label) | |
::part(overlay) |
CSS Custom Properties
Este componente no expone CSS custom properties.