Dropzone
<k-dropzone>
This UI component hasn't been finalized yet. The functionality and syntax aren't stable and might be redone in an upcoming release. Only use it at your own risk - breaking changes are likely to occur.
The dropzone component helps to simplify creating areas, where files can be dropped and uploaded or displayed. You simply wrap it around any other element to create the zone. The dropzone will also create a focus ring around the area when the user drags files over it.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| disabled |
boolean |
false |
You can deactivate the dropzone with this property
|
Events
| Event | Description | Passes |
|---|---|---|
| drop |
The drop event is triggered when files are being dropped into the dropzone.
|
|
Slots
| Slot | Description |
|---|---|
| default | Everything that should be covered by the dropzone |
Example
<template>
<k-dropzone @drop="upload">
<k-empty icon="image">Drop some files here</k-empty>
<k-upload ref="uploader" />
</k-dropzone>
</template>
<script>
export default {
methods: {
drop(files) {
// start the uploader
this.$refs.uploader.drop(files);
}
}
};
</script>CSS classes
.k-dropzone