The FilePondEntryListElement class extends the FilePondSvelteComponentElement class. The class used to construct the <file-pond-entry-list> element.
The FilePondEntryListElement in charge of rendering the Filepond templates and managing user interaction.
Properties
disabled
disabled: assets
assets: locale
locale: template
template: beforeRenderTemplate
beforeRenderTemplate: beforeRenderNode
beforeRenderNode: propResourceMap
propResourceMap: drag
drag: dragDetachMargin
dragDetachMargin: dragSafetyMargin
dragSafetyMargin: drop
drop: dropRoot
dropRoot: dropPadding
dropPadding: entryAnimationProps
entryAnimationProps: entryAnimationOriginMap
entryAnimationOriginMap: entryAnimationStaggerInterval
entryAnimationStaggerInterval: Events
“dragentry”
const element = document.querySelector("file-pond-entry-list");
element.addEventListener("dragentry", (e) => {
// Event handler
});
“dragentrystart”
const element = document.querySelector("file-pond-entry-list");
element.addEventListener("dragentrystart", (e) => {
// Event handler
});
“dragentryend”
const element = document.querySelector("file-pond-entry-list");
element.addEventListener("dragentryend", (e) => {
// Event handler
});
“updateplaceholder”
const element = document.querySelector("file-pond-entry-list");
element.addEventListener("updateplaceholder", (e) => {
// Event handler
});
Custom Properties
entry-padding
file-pond-entry-list {
--entry-padding: calc(var(--default-padding) * 0.5);
}
entry-shadow
The entry shadow. This style is applied to the element panel that is erendered behind the entry. For performance reasons this style is not applied to virtual elements.
file-pond-entry-list {
--entry-shadow: none;
}
entry-lifted-shadow
Shadow style to use when lifting/dragging an entry.
file-pond-entry-list {
--entry-lifted-shadow: none;
}
entry-min-height
The minimum height the entry should occupy.
file-pond-entry-list {
--entry-min-height: 2.5em;
}
entry-color
Default color used for text.
file-pond-entry-list {
--entry-color: currentColor;
}
entry-background-color
The color of the entry background. This style is set on the element panel that is rendered behind the entry and on virtual entry elements.
file-pond-entry-list {
--entry-background-color: inherit;
}
entry-border-radius
The radius of the entry border. This style is set on the element panels that are rendered in front and behind the entry, and on the virtual entry element. It’s also used for clipping media.
file-pond-entry-list {
--entry-border-radius: calc(var(--default-border-radius, 0) * 0.5);
}
entry-border
The style of the entry border, is set on the element panel that is rendered in front of the entry.
file-pond-entry-list {
--entry-border: var(--default-border, none);
}
entry-border-top
Inherits --entry-border style.
file-pond-entry-list {
--entry-border-top: var(--entry-border);
}
entry-border-right
Inherits --entry-border style.
file-pond-entry-list {
--entry-border-right: var(--entry-border);
}
entry-border-bottom
Inherits --entry-border style.
file-pond-entry-list {
--entry-border-bottom: var(--entry-border);
}
entry-border-left
Inherits --entry-border style.
file-pond-entry-list {
--entry-border-left: var(--entry-border);
}
media-background-color
file-pond-entry-list {
--media-background-color: black;
}
font-size-m
file-pond-entry-list {
--font-size-m: 0.75em;
}
font-size-s
file-pond-entry-list {
--font-size-s: 0.625em;
}
font-size-xs
file-pond-entry-list {
--font-size-xs: 0.5em;
}
status-info
file-pond-entry-list {
--status-info: #a7d6fb;
}
status-success
file-pond-entry-list {
--status-success: #97e1a8;
}
status-warning
file-pond-entry-list {
--status-warning: #f9db82;
}
status-error
file-pond-entry-list {
--status-error: #f7938c;
}
status-system
file-pond-entry-list {
--status-system: #d3d3d3;
}