Properties

disabled

disabled: boolean

assets

assets: { [key: string]: string }

locale

locale: Locale

template

template: TemplateNode[]

beforeRenderNode

beforeRenderNode: (node: TemplateNode, context: NodeContext, sharedContext: NodeContext) => TemplateNode | void | false

drag

drag: boolean

dragDetachMargin

dragDetachMargin: number

dragSafetyMargin

dragSafetyMargin: number

drop

drop: boolean

dropRoot

dropRoot: HTMLElement

dropPadding

dropPadding: number

entryAnimationStaggerInterval

entryAnimationStaggerInterval: number

entryAnimationProps

entryAnimationProps: { [animation: string]: EntryAnimation }

entryAnimationOriginMap

entryAnimationOriginMap: { [origin: string]: string }

propResourceMap

propResourceMap: { [componentProperty: string]: string }

Events

dragentry

element.addEventListener("dragentry", (e) => {
  // Event handler
});

dragentrystart

element.addEventListener("dragentrystart", (e) => {
  // Event handler
});

dragentryend

element.addEventListener("dragentryend", (e) => {
  // Event handler
});

updateplaceholder

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;
}

image-rendering

The default render quality of images. On slower devices pixelated results in a big performance boost, set to smooth for better image quality.

file-pond-entry-list {
  --image-rendering: pixelated;
}

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;
}