A component to be used within the ui5-upload-collection.
ES6 Module Import
import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";
Properties
| Description | Disables the delete button. |
| Type | boolean |
| Default | false |
file
| Description | Holds an instance of File associated with this item. |
| Type | File | null |
| Default | null |
fileName
| Description | The name of the file. |
| Type | string |
| Default | "" |
fileNameClickable
| Description | If set to true the file name will be clickable and it will fire file-name-click event upon click. |
| Type | boolean |
| Default | false |
| Description | Hides the delete button. |
| Type | boolean |
| Default | false |
| Description | Hides the retry button when uploadState property is Error. |
| Type | boolean |
| Default | false |
| Description | Hides the terminate button when uploadState property is Uploading. |
| Type | boolean |
| Default | false |
progress
| Description | The upload progress in percentage.
Note: Expected values are in the interval [0, 100]. |
| Type | number |
| Default | 0 |
uploadState
| Description | Upload state.
Depending on this property, the item displays the following:
- Ready - progress indicator is displayed.
- Uploading - progress indicator and terminate button are displayed. When the terminate button is pressed, terminate event is fired.
- Error - progress indicator and retry button are displayed. When the retry button is pressed, retry event is fired.
- Complete - progress indicator is not displayed. |
| Type | "Complete" | "Error" | "Ready" | "Uploading" (value descriptions in: UploadState) |
| Default | "Ready" |
accessibilityAttributes
| Description | Defines the additional accessibility attributes that will be applied to the component. The following fields are supported:
- ariaSetsize: Defines the number of items in the current set when not all items in the set are present in the DOM. Note: The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set -1.
- ariaPosinset: Defines an element's number or position in the current set when not all items are present in the DOM. Note: The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. |
| Type | ListItemAccessibilityAttributes |
| Default | {} |
| Since | 1.15.0 |
accessibleRole
| Description | Used to define the role of the list item.
Note: If not set, the role is automatically inherited from the parent ui5-list based on its accessible-role property (e.g. Menu -> MenuItem, Tree -> TreeItem, ListBox -> Option). An explicitly set accessible-role on the list item takes precedence over the inherited role. |
| Type | "ListItem" | "MenuItem" | "None" | "Option" | "TreeItem" | undefined (value descriptions in: ListItemAccessibleRole) |
| Default | undefined |
| Since | 2.23.0 |
highlight
| Description | Defines the highlight state of the list items. Available options are: "None" (by default), "Positive", "Critical", "Information" and "Negative". |
| Type | "Critical" | "Information" | "Negative" | "None" | "Positive" (value descriptions in: Highlight) |
| Default | "None" |
| Since | 1.24 |
navigated
| Description | The navigated state of the list item. If set to true, a navigation indicator is displayed at the end of the list item. |
| Type | boolean |
| Default | false |
| Since | 1.10.0 |
selected
| Description | Defines the selected state of the component. |
| Type | boolean |
| Default | false |
| Description | Defines the text of the tooltip that would be displayed for the list item. |
| Type | string | undefined |
| Default | undefined |
| Since | 1.23.0 |
type
| Description | Defines the visual indication and behavior of the list items. Available options are Active (by default), Inactive, InactiveSelectable, Detail and Navigation.
Note: When set to Active or Navigation, the item will provide visual response upon press and hover, while with type Inactive, InactiveSelectable and Detail - will not.
Note: InactiveSelectable behaves like Inactive (no active press/hover feedback and the item-click event is not fired), but the item can still be selected. Clicking the item body, pressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio button in Single modes) toggles the selection when the list has a selection mode. |
| Type | "Active" | "Detail" | "Inactive" | "InactiveSelectable" | "Navigation" (value descriptions in: ListItemType) |
| Default | "Active" |
Slots
default
| Description | Hold the description of the ui5-upload-collection-item. Will be shown below the file name. |
| Type | Array<Node> |
thumbnail
| Description | A thumbnail, which will be shown in the beginning of the ui5-upload-collection-item.
Note: Use ui5-icon or img for the intended design. |
| Type | Array<HTMLElement> |
| Description | Defines the delete button, displayed in "Delete" mode. Note: While the slot allows custom buttons, to match design guidelines, please use the ui5-button component. Note: When the slot is not present, a built-in delete button will be displayed. |
| Type | Array<IButton> |
| Since | 1.9.0 |
Events
file-name-click
| Description | Fired when the file name is clicked.
Note: This event is only available when fileNameClickable property is true. |
| Type | CustomEvent |
| Bubbles | Yes |
| Cancelable | No |
rename
| Description | Fired when the fileName property gets changed.
Note: An edit button is displayed on each item, when the ui5-upload-collection-item type property is set to Detail. |
| Type | CustomEvent |
| Bubbles | Yes |
| Cancelable | No |
retry
| Description | Fired when the retry button is pressed.
Note: Retry button is displayed when uploadState property is set to Error. |
| Type | CustomEvent |
| Bubbles | Yes |
| Cancelable | No |
terminate
| Description | Fired when the terminate button is pressed.
Note: Terminate button is displayed when uploadState property is set to Uploading. |
| Type | CustomEvent |
| Bubbles | Yes |
| Cancelable | No |
click
| Description | Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
Note: The event will not be fired if the disabled property is set to true. |
| Type | CustomEvent<ListItemBaseClickEventDetail> |
| Parameters | originalEvent: Event
The original event from the user interaction. |
| Since | 2.23.0 |
| Bubbles | Yes |
| Cancelable | No |
detail-click
| Description | Fired when the user clicks on the detail button when type is Detail. |
| Type | CustomEvent |
| Bubbles | Yes |
| Cancelable | No |
Methods
No methods available for this component.
CSS Parts
No CSS parts available for this component.
CSS Custom States
No CSS custom states available for this component.