The ld-upload-progress
component is used internally for the ld-file-upload
. It is the visual part of the list of files and their current upload progress.
<ld-upload-progress start-upload='false'>
<ld-upload-item state='pending' file-name='Liquid' file-size='1.28'></ld-upload-item>
<ld-upload-item file-name='Liquid' file-size='1.28'></ld-upload-item>
<ld-upload-item file-name='Liquid' file-size='1.28'></ld-upload-item>
<ld-upload-item file-name='Liquid' file-size='1.28'></ld-upload-item>
</ld-upload-progress>
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
icons |
-- | Maps file types to icon path | { pdf?: string; zip?: string; jpeg?: string; txt?: string; png?: string; rtf?: string; } |
undefined |
key |
key |
for tracking the node's identity when working with lists | string | number |
undefined |
ref |
ref |
reference to component | any |
undefined |
size |
size |
Size of the context menu. | "lg" | "sm" |
undefined |
startUpload |
start-upload |
startUpload defines whether upload starts immediately after choosing files or after confirmation. | boolean |
false |
uploadItemTypes |
-- | { fileName: string; fileType: string; }[] |
[] |
|
uploadItems |
-- | UploadItem[] |
[ { state: 'pending', fileName: 'file1.png', fileSize: 100000, fileType: 'png', progress: 0, }, { state: 'uploading', fileName: 'file2.png', fileSize: 200000, fileType: 'png', progress: 0, }, ] |
Part | Description |
---|---|
"list" |
ul element wrapping the default slot |
graph TD;
ld-upload-progress --> ld-upload-item
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-file-upload --> ld-upload-progress
style ld-upload-progress fill:#f9f,stroke:#333,stroke-width:4px
Built with StencilJS