Upload

Upload your days, download your life.

Example

Show Code

<script lang="ts" setup>
import { RSpace, RText, RUpload } from 'roughness'
import { ref } from 'vue'

let file = ref<File>()
let loading = ref(false)

function select(value: File) {
  loading.value = true
  setTimeout(() => {
    file.value = value
    loading.value = false
  }, 1000)
}
</script>

<template>
  <RSpace vertical align="start">
    <RUpload :loading="loading" @select="select">Drop or Select File</RUpload>
    <RText>It's {{ file ? file.name : 'nothing' }}.</RText>
  </RSpace>
</template>

Drop or Select FileIt's nothing.

Usage

Props

Name	Type	Default Value	Description
block
filled
graphicsOptions
loading

Events

Name	Type	Description
select

Slots

Name	Type	Description
default

Styles

Name	Type	Default Value	Description
--r-upload-color
--r-upload-border-color
--r-upload-border-width
--r-upload-border-dash