mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(file-uploader): improve FileUploaderItem examples (#1269)

Browse source
This commit is contained in:
metonym 2022-04-28 07:39:58 -07:00 • committed by GitHub
commit d40d238de5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

30
docs/src/pages/components/FileUploader.svx
View file

@ -48,9 +48,35 @@ There are two ways to clear files in `FileUploader`:
<FileUploaderItem name="README.md" status="complete" /> <FileUploaderItem name="README.md" status="complete" />
### Item (invalid) ### Item (edit)
<FileUploaderItem invalid name="README.md" status="edit" /> If the `status` is `"edit"`, clicking the close icon will dispatch a `delete` event.
The event detail contains the item `id`.
<FileUploaderItem id="readme" name="README.md" status="edit" on:delete={(e) => {
console.log(e.detail); // "readme"
}} />
### Item (edit status, invalid state)
An item can also have an edit status with an invalid state.
<FileUploaderItem invalid id="readme" name="README.md" status="edit" on:delete />
### Item (edit status, invalid state with subject, body)
Use the `errorSubject` and `errorBody` props to customize the error message.
<FileUploaderItem
invalid
id="readme"
name="README.md"
errorSubject="File size exceeds 500kb limit"
errorBody="Please select a new file."
status="edit"
on:delete
/>
### Item sizes ### Item sizes