The ld-upload-item
component is a subcomponent for ld-file-upload
/ ld-upload-progress
and is meant to be used in the slot of the ld-upload-progress
component.
<ld-upload-item file-name='Liquid' file-size='1.28'></ld-upload-item>
<ld-upload-item state='uploading' file-name='Liquid' file-size='1.28' progress='25'></ld-upload-item>
<ld-upload-item state='uploading' file-name='Liquid' file-size='1.28' progress='25'></ld-upload-item>
<ld-slider value="25" max="100" width="14rem"></ld-slider>
<script>
void function() {
const slider = document.currentScript.previousElementSibling
const progress = slider.previousElementSibling
slider.addEventListener('ldchange', ev => {
const val = ev.detail[0]
progress.progress = val
})
}()
</script>
<ld-upload-item state='uploaded' file-name='Liquid' file-size='1.28'></ld-upload-item>
<ld-upload-item state='upload failed' file-name='Liquid' file-size='1.28'></ld-upload-item>
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
fileName |
file-name |
Name of the uploaded file. | string |
undefined |
fileSize |
file-size |
Size of the uploaded file in bytes. | number |
undefined |
fileType |
file-type |
Type of the uploaded file. | string |
undefined |
icons |
-- | Maps file types to icon path | { pdf?: string; zip?: string; jpeg?: string; txt?: string; png?: string; rtf?: string; } |
{} |
key |
key |
for tracking the node's identity when working with lists | string | number |
undefined |
ldTabindex |
ld-tabindex |
Tab index of the progress item. | number |
undefined |
mode |
mode |
Display mode. | "danger" | "highlight" | "neutral" |
'neutral' |
previewUrl |
preview-url |
URL of the uploaded image. Preview of image will be shown after upload. | string |
undefined |
progress |
progress |
Upload progress in percent. | number |
0 |
ref |
ref |
reference to component | any |
undefined |
state |
state |
State of the file. | "pending" | "upload failed" | "uploaded" | "uploading" |
'pending' |
Part | Description |
---|---|
"button" |
ld-button element wrapping the default slot |
"card" |
|
"listitem" |
li element wrapping the ld-button element |
graph TD;
ld-upload-item --> ld-icon
ld-upload-item --> ld-typo
ld-upload-item --> ld-button
ld-upload-item --> ld-sr-only
ld-upload-item --> ld-progress
ld-upload-progress --> ld-upload-item
style ld-upload-item fill:#f9f,stroke:#333,stroke-width:4px
Built with StencilJS